提问者:小点点

圆滑旋转木马:如何在人像模式下更改旋转木马设置


我想让用户能够滑动轮播如果在一个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);
            }
        });


共1个答案

匿名用户

启用/禁用滑动的适当布尔选项是swipe,而不是swipetoslide

此外,您应该能够使用slicksetoption方法更新该选项并刷新幻灯片放映。这样就可以省去你的幻灯片演示。例如:carousel.slicksetoption('swipe',false,true)

从https://kenwheeler.github.io/slick/的文档中

slicksetoption-option:string,value:依赖于option,refresh:boolean实时设置单个值。如果是UI更新,则将refresh设置为true。