jquery - 光滑的轮播桌面设置覆盖移动设备

Question

我遇到了问题，每当在响应模式下加载页面时，它都会加载不在断点中的原始设置。当我删除

 slidesToShow: 3,
 slidesToScroll: 1,

并使用这些设置添加断点 3000 它也会发生，它会加载第一个选项，直到我调整窗口大小。为什么会这样。

这是一个视频示例：https ://www.youtube.com/watch?v=4shWJhz6r-k ，当我加载显示 3 张幻灯片的页面时，我需要调整窗口大小以解决此问题。

看起来 slick 不知道我在移动断点上。

这是我的设置

function slickSettings() {
  return {
    infinite: true,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    mobileFirst: true,
    prevArrow: '<img src="../assets/prev.svg">',
    nextArrow: '<img src="../assets/next.svg">',
    responsive: [
      {
        breakpoint: 1115,
        settings: {
          slidesToShow: 3,
          centerMode: false,
          arrows: false,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 990,
        settings: {
          slidesToShow: 2,
          centerMode: false,
          arrows: false,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 700,
        settings: {
          centerMode: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          centerPadding: '20px',
          arrows: false,
  
        }
      },
      {
        breakpoint: 650,
        settings: {
          centerMode: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          centerPadding: '20px',
          arrows: false,
        }
      },
   
      {
        breakpoint: 400,
        settings: {
          centerMode: true,
          centerPadding: '15px',
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
        }
      },
      {
        breakpoint: 321,
        settings: {
          slidesToShow:1,
          slidesToScroll: 1,
          centerMode: false,
          arrows: false,
        }
      },
    
    ]
  }
};
  
  

标签： jqueryslick.js