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

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

• javascript
• jquery
• responsive-design
• slick.js

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