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, but it's really clunky:

$(document).ready(function () {

    var $window = $(window),
        $slick = $('.slick'),
        toggleSlick;

    toggleSlick = function () {
        if ($window.width() > 520) {
            $slick.slick();
        } else {
            $slick.unslick();
        }
    }

    $window.resize(toggleSlick);
    toggleSlick();
});

I also get a Uncaught TypeError: $slick.unslick is not a function error in the console.

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, but it's really clunky:

$(document).ready(function () {

    var $window = $(window),
        $slick = $('.slick'),
        toggleSlick;

    toggleSlick = function () {
        if ($window.width() > 520) {
            $slick.slick();
        } else {
            $slick.unslick();
        }
    }

    $window.resize(toggleSlick);
    toggleSlick();
});

I also get a Uncaught TypeError: $slick.unslick is not a function error in the console.

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

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

1 Answer 1

I believe the way you call slick methods has changed.

Instead of $('.slick').unslick();

try $('.slick').slick("unslick");

You can also call this directly inside the responsive option in the slick options