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

Question

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

我按照示例来更改基于 portrait/landscape 的轮播设置，但它只在一定程度上起作用：

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

我想我必须以某种方式重新初始化轮播，但我不知道如何。我尝试 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

enable/disable 滑动的适当布尔选项是 swipe，而不是 swipeToSlide。

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

来自 https://kenwheeler.github.io/slick/

的文档

slickSetOption- option : string, value : depends on option, refresh : boolean Sets an individual value live. Set refresh to true if it's a UI update.

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

Slick carousel: how to change carousel settings on portrait mode

javascript

jquery

slick.js