Slick carousel：如何在纵向模式下更改轮播设置答案

【问题标题】：Slick carousel: how to change carousel settings on portrait modeSlick carousel：如何在纵向模式下更改轮播设置
【发布时间】：2020-06-23 01:59:06
【问题描述】：

我想让用户在 ipad 的纵向模式下能够滑动轮播，而在横向模式下不能滑动。

我按照this的例子来改变基于纵向/横向的轮播设置，但它只在一定程度上起作用：

以下代码适用于页面加载，但不适用于方向更改。

我想我必须以某种方式重新初始化轮播，但我不知道该怎么做。我尝试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);
            }
        });

【问题讨论】：

您正在更新设置，是否还需要重新初始化轮播？
这就是我认为我对carousel.slick(slickSettings); 所做的事情，但它似乎不起作用。我是不是重新初始化错了？
我认为可行的流程是：carousel.slick('unslick'); //unslick -> slickSettings.swipeToSlide = false; //change settings -> carousel.slick(slickSettings); //reinitialize
您能否更新问题以包含 stacksn-p？那么我们就可以看到正在运行的错误了吗？

标签： javascript jquery slick.js

【解决方案1】：

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

此外，您应该能够使用slickSetOption 方法更新该选项并刷新幻灯片。这将消除对不光滑和重新加载幻灯片的需要。例如：carousel.slickSetOption('swipe', false, true)。

来自https://kenwheeler.github.io/slick/的文档

slickSetOption- option：字符串，value：取决于选项，refresh： boolean 设置一个单独的值。如果它是一个刷新设置为真界面更新。

【讨论】：