Enable and disable Slick Slider on certain break points

Question

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?

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?

I'm using https://github.com/kenwheeler/slick

Winchell

Answer 1

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

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

Oberhausen

Thanks for the feedback - I can see it works perfectly on yours, but on mine it now stops it from turning off or on, weirdly - I need to investigate further... – Winchell

Good luck! Let me know how it goes. Remember, I put the init in a function so make sure you call the function on page load instead. – Oberhausen

You should only call slick() once, like here: github.com/kenwheeler/slick/issues/542#issuecomment-168658956 , note the custom logic based on the [.slick-initialized] class. – Milla