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:
Expected: The images are shown in slider
Another issue:
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.
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.
Most helpful comment
The way I solved both issues is with these couple of extra lines of code:
EDIT: The above could probably be shortened to: