Slick slider 響應問題

Question

您好我正在嘗試為 Slick slider 中的各種幻燈片創建一個斷點，但它無法正常工作。 我試圖通過這段代碼創建斷點：

   jQuery('.collection-slider').slick({
       infinite: true,
       slidesToShow: $(window).width() > 600 ? 5 : 1,
       slidesToScroll: 1,
       infinite: false,
       focusOnSelect: true,
       centerPadding: '0px',
       dots: true,
      
       draggable: true,
       autoplay:true,
       autoplaySpeed:1500,
       prevArrow: '.thumbnails-slider__prev--recommendation',
       nextArrow: '.thumbnails-slider__next--recommendation'
   });

我在桌面上顯示了 5 張幻燈片，寬度小於 600 像素，它只顯示了一張幻燈片。 我需要您的幫助才能將我的幻燈片進一步分解為其他屏幕尺寸。 請指導。

Answer 1

您能否分享一下為什么原生 slick 的Responsive Display不起作用：

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

您的代碼幾乎沒有問題。 我相信窗口的寬度發現不正確（我相信window.screen.width可以檢測窗口的寬度）。 此外，您可以在小部件初始化時配置 slick 的slidesToShow一次。 如果用戶調整屏幕大小怎么辦？ 或者重新定位他的手機？ 我想，您必須附加到特定事件並重新初始化小部件。

我建議嘗試使用本機機制，可能調試問題所在。 自己做自定義 RWD 並不是那么簡單。