javascript - 光滑的轮播忽略响应断点

Question

我正在使用Slick构建一个轮播，并且设置了一些响应式断点，如下所示：

var slidesNumber = $('.aslide').length;
var options = {
  rows: (slidesNumber > 3 ? 2 : 1),
  slidesPerRow: 3,
  slidesToShow: (slidesNumber > 3 ? 1 : 3),
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  dotsClass: 'slick-dots slick-dots-black',
  adaptiveHeight: true,
  responsive: [
    {
      breakpoint: 1280,
      settings: {
        slidesPerRow: 2,
        slidesToShow: 1,
        slidesToScroll: 1,
        rows: 2,
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesPerRow: 1,
        slidesToShow: 1,
        slidesToScroll: 1,
        rows: 1,
      }
    }
  ]
}

$('.slider').slick(options);

但是，Slick 完全忽略 768px 断点并显示 2 行，每行 2 张幻灯片，而不是 1 行 1 张幻灯片。这是一个JSFiddle。

我看过这里和这里。

该mobileFirst设置使 Slick 甚至忽略 1280px 断点。

我也看过其他帖子，但还没有找到解决方案。

编辑1：

此外，在 JSFiddle 中注意到，如果您加载窗口宽度小于 768px 的页面，它会显示 2 行中的 3 张幻灯片，但如果您上下调整大小，它会再次开始显示 2 行中的 2 张幻灯片。

标签： javascriptjqueryslick.js