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

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?

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

[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 😃