调整大小小于 1200px 仅轮播否则，“不光滑”

编程问答 2022-05-02

问题描述

在 Slick JS 下用于我们的组件。只有当用户从桌面调整到移动（小于 767 像素）并手动刷新页面时，它才能正常工作。

如何在调整大小期间使该脚本工作？小于1200px只需要初始化slick。不仅如此，没有华而不实，只有 div 列容器。

$('.listing.columns').slick({                    
            dots: true,infinite: true,slidesToShow: 3,slidesToScroll: 3,variableWidth: true,responsive: [
            {
                breakpoint: 9999,settings: 'unslick'
            },{
                breakpoint: 1200,settings: {
                    slidesToShow: 3,dots: true
                }
            },{
                breakpoint: 767,settings: {
                    slidesToShow: 1,slidesToScroll: 1,dots: true,prevArrow: false
                }
            }]
        });

解决方法

尝试包含一个 window 调整大小事件，看看您是否可以像这样观看：

$(window).on('resize',function() {
  $('.listing.columns').slick('resize');
});

还有 prevArrow 不接受布尔值作为值， 它需要是以下类型： string (html|jQuery selector) | object (DOM node|jQuery object)

$('.listing.columns').slick({                    
    dots: true,infinite: true,slidesToShow: 3,slidesToScroll: 3,variableWidth: true,responsive: [
      {
        breakpoint: 9999,settings: 'unslick'
      },{
        breakpoint: 1200,settings: {
          slidesToShow: 3,variableWidth: true
        }
      },{
        breakpoint: 767,settings: {
          slidesToShow: 1,slidesToScroll: 1,variableWidth: false,}
      } 
    ]
});

$(window).on('resize',function() {
  $('.listing.columns').slick('resize');
});
.listing-el {
  line-height: 100px;
  background-color: #00DBDE;
  text-align: center;
  font-size: 30px;
  margin: 0 1rem;
  color: #fff;
  width: 200px;
}

.listing-el-small {
  width: 150px;
  background-color: #4158D0;
}

.listing-el-large {
  width: 250px;
  background-color: #FBDA61;
}

.listing-el-xlarge {
  width: 300px;
  background-color: #21D4FD;
}

@media(min-width:1201px){
  .listing-el {
    display: inline-block;
    margin: 1rem;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<div class="listing columns">
  <div class="listing-el listing-el-large">1</div>
  <div class="listing-el listing-el-small">2</div>
  <div class="listing-el listing-el-xlarge">3</div>
  <div class="listing-el">4</div>
  <div class="listing-el listing-el-xlarge">5</div>
  <div class="listing-el">6</div>
  <div class="listing-el">7</div>
  <div class="listing-el listing-el-small">8</div>
  <div class="listing-el">9</div>
  <div class="listing-el listing-el-large">10</div>
</div>

jqueryslick.js