javascript - 在某些断点上启用和禁用 Slick Slider

Question

我正在尝试使 Slick Slider (slick.js) 仅在超过 520 像素宽时启动。低于它的任何东西和幻灯片只是堆叠(即没有光滑)。是否可以在不刷新页面的情况下工作？

我已经做到了，当将浏览器(窄)拖动到 500px 以下时，它会起作用，但是当我将它移动到 500px 以上时，它不会在不刷新页面的情况下重新启动...

$('.slick').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    delay: 5000,
    speed: 700,
    responsive: [
        {
            breakpoint: 500,
            settings: "unslick"
        }
    ]
});

有解决办法吗？

我正在使用 https://github.com/kenwheeler/slick

Answer 1

当窗口大小超过 500 时，您可以尝试重建它。这在我的演示中似乎有效。

JSFiddle Demo

function slickify(){
    $('.slick').slick({
        autoplay: true,
        autoplaySpeed: 4000,
        delay: 5000,
        speed: 700,
        responsive: [
            {
                breakpoint: 500,
                settings: "unslick"
            }
        ]
    });
}

slickify();
$(window).resize(function(){
    var $windowWidth = $(window).width();
    if ($windowWidth > 500) {
        slickify();   
    }
});