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

Question

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

Answer 1

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

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

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

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