Do you need to make an element Slick slider on mobile while it should be stacked images on desktop? Or opposite – desktop should show the Slick slider but on mobile images should be displayed one below another. You would expect for Slick’s responsive setting to take care of that.

var settings = {
   ...
   mobileFirst: true,
   responsive: [{
      breakpoint: 767,
      settings: "unslick"
   }]
}

It does but with one huge issue – once element is turned from Slick to no Slick it can never get back into Slick slider again. For example if you set Slick to display on mobile and you open the page in very narrow browser window Slick slider would trigger. Now when you resize the screen to large size Slick will destroy itself and you will have plain slides. But now when you resize back to mobile slide Slick slider won’t turn on again as one would expect.

Ok, so how do we handle this? With this piece of code:

/* Get element */
var slider = $('.slider');

/* Slider settings */
var settings = {
   ...
   mobileFirst: true,
   responsive: [{
      breakpoint: 767,
      settings: "unslick"
   }]
}

/* Initialize the Slick slider */
slider.slick(settings);

/* Do this every time window gets resized */
$(window).on('resize', function() {

   /* If we are above mobile breakpoint unslick the slider */
   if ($(window).width() > 767)
   {
      /* Do nothing (responsive Slick's setting will unslick the slider) */
      return;
   }
   /* We are below mobile breakpoint, initialize the slider
      if it is not already initialized */
   if (!slider.hasClass('slick-initialized'))
   {
      return slider.slick(settings);
   }