CODEWITHSUNDEEP
javascriptjqueryresponsive-designslick.js
Jack Barham
Jack Barham

Reputation: 3209

Enable and disable Slick Slider on certain break points

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

Upvotes: 9

Views: 32078

Answers (1)

Steve
Steve

Reputation: 201

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

Upvotes: 20

Related Questions