slick: Slick is never reenabled after "unslicked" at breakpoint

I use settings: 'unslick' to disable Slick at certain breakpoints. But as soon as Slick is disabled (either by resizing or at page load), it will never be reenabled when resizing. Example:

$('.my-class').slick({
    mobileFirst: true,
    slidesToShow: 2,
    slidesToScroll: 2,
    responsive: [ {
        breakpoint: 768,
        settings: 'unslick'
    } ]
});

Loading the page with a viewport narrower than 768px enables Slick, resizing beyond 768px disables Slick, but resizing back below 768px keeps Slick disabled.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 1
Comments: 21 (1 by maintainers)

Most upvoted comments

The way I solved both issues is with these couple of extra lines of code:

$(window).resize(function() {
  $('.js-slider').slick('resize');
});

$(window).on('orientationchange', function() {
  $('.js-slider').slick('resize');
});

EDIT: The above could probably be shortened to:

$(window).on('resize orientationchange', function() {
  $('.js-slider').slick('resize');
});

+44

vfonic on Apr 11, 2017

+1.

And docs should mention this issue and should not feature unslick on the responsive part, since it simply doesn’t work as expected, as really a lot of threads and developers are reporting. So much threads definitely make this one an issue and a bug.

+21

stratboy on Dec 27, 2016

Comment on what @vfonic posted. For me the solution was this:

$(window).on('resize orientationchange', function() {
  var mySlider = $('.js-slider');

  // without this check, all kinds of weird errors happen, and the slider doesn't really work
  if(!mySlider.hasClass('slick-initialized')){
       mySlider.slick({/* original options here*/});
  }
});

I’m using version 1.8.1

vladiibine on May 29, 2018

+1 This should be a bug, and officially fixed.

tigerclaw-az on Sep 22, 2015