调整大小小于 1200px 时仅轮播。否则，"unslick"

Question

在 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,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },{
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true,
                    prevArrow: false
                }
            }]
        });

Answer 1

尝试添加一个 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,
          slidesToScroll: 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>

调整大小小于 1200px 时仅轮播。否则，"unslick"

On resize less than 1200px only carousel. otherwise, "unslick"

jquery

slick.js