Slick: Slick responsive not working on orientation change/window resize

Created on 1 Dec 2015  路  2Comments  路  Source: kenwheeler/slick

Hi guys,

Thanks for great library!

I'm trying to use slick responsive property and it looks like there are some issues when user resizes browser window or when orientation changes on mobile device.

Here's the fiddle:
https://jsfiddle.net/6gdadqyp/17/
Full screen:
https://jsfiddle.net/6gdadqyp/17/embedded/result/

Repro steps:

  1. Open link
  2. Resize the width of the browser window to below 640px

Expected: The images are shown in slider

Another issue:

  1. Resize the width of the browser window to below 640px
  2. Open link (refresh page)

Expected: The same behavior always on the same width (responsive). This time slick is initialized and if you increase the width above break point (640), and then decrease it again, the slick won't reinitialize.
This can be reproduced by changing phone orientation back-and-forth.

Most helpful comment

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

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

Yup. After slick is destroyed the events aren't added back. Check this out here https://github.com/kenwheeler/slick/issues/1730

Right you you can listen to window resize as your couple of lines of code does.

Was this page helpful?
0 / 5 - 0 ratings