Slick: Reinit slider when leaving a breakpoint with settings: 'unslick'

[alexej-d]

Hey there,
really love your plugin, I use it in nearly every project – thanks for the great work.
I observed a counter-intuitive behaviour with the following init code:

    var slickBaseSettings = {
        infinite: false,
        slide: '.is-slide',
        adaptiveHeight: true,
        dots: false,
        slidesToShow: 4, 
        arrows: true
    };
    $('.is-slider').slick( $.extend({
        responsive: [{
            breakpoint: 640,
            settings: 'unslick'
        }]
    }, slickBaseSettings) );

One would expect that once leaving the breakpoint the slider reinitializes but it is not the case. Am I missing something?

[aldidas]

In my recent project, I was facing this issue and ended up to assign the slick() initialization inside another function. So we can listen to jQuery's $(window).resize(), and re-init the slick when the window's width reach the breakpoint. Here is my code :

    // function and variables, 'unslick' while window size reach maximum width (641px)
    var maxWidth = 641,
      slickVar = {
        lazyLoad: 'ondemand',
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        mobileFirst: true,
        responsive: [
          {
            breakpoint: maxWidth,
            settings: 'unslick'
          }
        ]
      },
      runSlick = function() {
        $('#front-products').slick(slickVar);
        $('#front-recipes').slick(slickVar);
        $('#front-gallery').slick(slickVar);
        $('#front-blog').slick(slickVar);
      };

      // slick initialization while document ready
      runSlick();

      // listen to jQuery's window resize
      $(window).on('resize', function(){
        var width = $(window).width();
        if(width < maxWidth) {
          // reinit slick while window's width is less than maximum width (641px)
          runSlick();
        }
      });

Suggestions open for any better solution :)

[simeydotme]

It's _dubiously_ documented here: https://github.com/kenwheeler/slick/releases/tag/1.4.0 - No current plans to change this. Better to use the window.resize event if you plan on removing carousels :)

[stevegrunwell]

For those who stumble across this issue through Google, I did a writeup on my company's blog demonstrating how to cleanly re-initialize Slick carousel in a responsive setting, after destroying it via unslick.

Hopefully this helps someone else :)

[Grawl]

my dirty try on this:

function slick() {
    $('[data-slick]').each(function(index, element) {
        if($(element).hasClass('slick-initialized')) return
        $(element).slick()
    })
}
if(window.innerWidth > 640) {
    slick()
}
$(window).on('resize', function(event) {
    console.log(event)
    if(event.target.innerWidth > 640) {
        slick()
    }
    else {
        $('[data-slick]').slick('unslick')
    }
})

[romannikiforov]

const settings = {
     // default settings
    responsive: [
        {
            breakpoint: 900,
            settings: { slidesToShow: 3 }
        },
        {
            breakpoint: 600,
            settings: { slidesToShow: 2 }
        },
        {
            breakpoint: 420,
            settings: "unslick"
        }
    ]
};

const sl =  $('.slider').slick(settings);

$(window).on('resize', function() {
   if( $(window).width() > 420 &&  !sl.hasClass('slick-initialized')) {
         $('.slider').slick(settings);
    }
});

[CornerstoneII]

For those who stumble across this issue through Google, I did a writeup on my company's blog demonstrating how to cleanly re-initialize Slick carousel in a responsive setting, after destroying it via unslick.

Hopefully this helps someone else :)

Error on this page

[stevegrunwell]

Oh no! I left the company several years ago, they must have taken down the engineering blog 😢. I'll reach out to the CEO and see if it can get reinstated (or if I can get copies of the posts to put elsewhere).

Thanks for the heads up!