I want to make the user be able to swipe the carousel if on portrait mode of an ipad, and not swipe if on landscape mode.
I followed this example in order to change the settings of the carousel based on portrait/landscape, but it only works to some extent:
The code below works on page load, but does not work on orientation change.
I supposed I have to reinitialize the carousel somehow, but I do not know how. I tried to unslick
it, and reinitialize it with the new settings but it doesn't seem to work.
var slickSettings = { /* general settings */ };
if ($(window).innerHeight() > $(window).innerWidth()) {
//portrait
slickSettings.swipeToSlide = true; // user can now swipe
console.log('portrait');
console.log(slickSettings);
} else {
//landscape
slickSettings.swipeToSlide = false; //user cannot swipe
console.log('landscape');
console.log(slickSettings);
}
//initialize carousel
carousel.slick(slickSettings);
/**
* Does not work
**/
$(window).on('orientationchange', function () {
console.log('orientation change');
if ($(window).innerHeight() > $(window).innerWidth()) {
//portrait
carousel.slick('unslick'); //unslick
slickSettings.swipeToSlide = true; //change settings
carousel.slick(slickSettings); //reinitialize
console.log(slickSettings);
} else {
//landscape
carousel.slick('unslick'); //unslick
slickSettings.swipeToSlide = false; //change settings
carousel.slick(slickSettings); //reinitialize
console.log(slickSettings);
}
});