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

[nwellnhof]

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.

[compact]

I'm encountering the same problem, so I added a window resize handler to manually slick/unslick depending on window width.

[ejwaibel]

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

[farinspace]

+1 .. here is an external solution to breakpoints, letting you slick an unslick .. https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

Either fix or I would just vote to leave this feature off in favor of letting a developer use an external breakpoint solution.

[CamdenSegal]

+1 the unslick responsive setting isn't automatically reversed when resizing to a screen size that should have slick enabled.

[dsteinel]

+1

[denisbouquet]

+1

[j-greig]

+1

[VykintasZaboras]

+1

[johnteakdigital]

same

[nicolas-santos]

+1

[vfonic]

+1

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

[stratboy]

+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.

[phelippe]

+1

[klierik]

+1

[ADavidLiu]

+1

[ghost]

what about react-slick?

[roberrrt-s]

+1

[carloschneider]

+1

[vladiibine]

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

[zschuessler]

@kenwheeler how can the community help on this? I see it has been an issue for a while now, let me know if there's anything we can do to get a fix in :-)

[vgavrilovikj]

Still not fixed...!!