我想让用户能够滑动轮播如果在一个ipad的肖像模式,而不是滑动如果在横向模式。
我遵循这个例子是为了改变基于肖像/风景的旋转木马的设置,但它只在某种程度上起作用:
下面的代码适用于页面加载,但不适用于方向更改。
我想我必须重新初始化旋转木马,但我不知道如何。我试着unslick
,并用新的设置重新初始化它,但似乎不起作用。
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);
}
});
启用/禁用滑动的适当布尔选项是swipe
,而不是swipetoslide
。
此外,您应该能够使用slicksetoption
方法更新该选项并刷新幻灯片放映。这样就可以省去你的幻灯片演示。例如:carousel.slicksetoption('swipe',false,true)
。
从https://kenwheeler.github.io/slick/的文档中
slicksetoption-option:string,value:依赖于option,refresh:boolean实时设置单个值。如果是UI更新,则将refresh设置为true。