slider does not reinitialize on resize if "unslick" is used in breakpoints

When you configure the slider to destroy on a certain breakpoint, it is not reinitialized after resizing the browser because the “resize” event is detached when you perform “unslick”.

$('.slider').slick({
        dots: false,
        infinite: true,
        arrows: false,
        speed: 200,
        slidesToShow: 1,
        mobileFirst: true,
        responsive: [
            {
                breakpoint: 768,
                settings: 'unslick'
            }
        ]
});

Demo can be found here: https://jsfiddle.net/v5c755kp/

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

[Emiya0306]

@mazzaker @simeydotme Yes, it is not a bug, but I think it is not a good choice for user to reinit it by userself. Slick should have its own instance props to log its breakpoint which causes unslick event, and next time to reinit by slick self.

If there are many slicks in one page, user should not reinit slick one by one. It causes a big trouble in my case. I think the best idea is slick can reinit by itself.