在 $(window).resize() 时更改 slidesToShow slick 属性

Question

这是我漂亮的滑块：

            var informations_panel = document.querySelector("#block-views-block-wazne-informacje-strona-glowna-block-1 > div:nth-child(3) > div > div.view-content");
            $(informations_panel).slick({
                autoplay: true,
                autoplaySpeed: 5000,
                arrows: true,
                dots: true,
                infinite: true,
                slidesToShow: 2,
                slidesToScroll: 1
            });

有没有办法在用户调整 window 大小时更改 slidesToShow 属性？使用 $(window).resize()，类似于：

    $(window).resize(function(){
        var informations_panel = document.querySelector("#block-views-block-wazne-informacje-strona-glowna-block-1 > div:nth-child(3) > div > div.view-content");
        if ($(window).width() < 992) {
            $(informations_panel).slick({
                autoplay: true,
                autoplaySpeed: 5000,
                arrows: true,
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        }
    });

此解决方案出错，导致我无法在同一元素上再次初始化 slick。当 window 的宽度大于 992px 时，我只想将属性 slidesToShow 从 2 更改为 1。

Answer 1

初始化滑块时，您可以在 "responsive" 属性中使用 "breakpoint"。 https://kenwheeler.github.io/slick/ 这个 link 应该会有帮助。

Answer 2

您可以使用slickSetOption

$(window).resize(function() {
  var informations_panel = document.querySelector("#block-views-block-wazne-informacje-strona-glowna-block-1 > div:nth-child(3) > div > div.view-content");
  if ($(window).width() < 992) {
    $(informations_panel).slick('slickSetOption', 'slidesToShow', 1);
  }
});

在 $(window).resize() 时更改 slidesToShow slick 属性

Changing slidesToShow slick property when $(window).resize()

javascript

jquery

slick.js