在某些断点上启用和禁用Slick Slider [英] Enable and disable Slick Slider on certain break points

问题描述

我正在尝试启用Slick Slider（slick.js）以仅启动超过520px的宽度。下面的任何东西和幻灯片只是堆叠（即没有光滑）。是否可以在不刷新页面的情况下工作？

I'm trying to enable Slick Slider (slick.js) to initiate only over 520px wide. Anything below that and the slides just stack (i.e. no slick). Is it possible so that it can work without refreshing the page?

我已经完成了这项工作，将浏览器（缩小）拖动到500px以下时可以正常工作，但是当我移动时超过500px它没有重新启动而没有刷新页面...

I've done this, which works when dragging the browser (narrow) below 500px, but when I move it over 500px it doesn't re-initiate without refreshing the page...

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

有没有办法解决这个问题？

Is there a way around this?

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

推荐答案

当窗口调整大小超过500时，你可以尝试重建它。这似乎可以在我的演示中使用。

You can try to reconstruct it when the window is resized above 500. This seems to work in my demo.

JSFiddle演示

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();   
    }
});

这篇关于在某些断点上启用和禁用Slick Slider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！