光滑的滑块响应问题

问题描述

嗨，我正在尝试为Slick滑块中的各种幻灯片创建一个断点，但是它无法正常工作。我试图通过以下代码创建断点：

   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像素时，它仅显示一张幻灯片。我需要您的帮助才能将幻灯片进一步缩小为其他屏幕尺寸。请指导。

解决方法

您能否分享一下本机的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可以用来检测窗口的宽度）。此外，您在小部件的初始化上配置一次平滑的slidesToShow。如果用户调整屏幕大小怎么办？还是重新定位他的手机？我想，您必须附加一个特定的事件并重新初始化该小部件。

我建议尝试使用本机机制，可能会调试出什么问题。独自进行自定义RWD并不是那么简单。

javascript jquery slick.js