Slick carousel: how to change carousel settings on portrait mode

问题: I want to make the user be able to swipe the carousel if on portrait mode of an ipad, and not swipe if on landscape mode. I followed this example in order to change the s...

问题:

I want to make the user be able to swipe the carousel if on portrait mode of an ipad, and not swipe if on landscape mode.

I followed this example in order to change the settings of the carousel based on portrait/landscape, but it only works to some extent:

The code below works on page load, but does not work on orientation change.

I supposed I have to reinitialize the carousel somehow, but I do not know how. I tried to unslick it, and reinitialize it with the new settings but it doesn't seem to work.

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:

The appropriate boolean option to enable/disable swiping would be swipe, not swipeToSlide.

Also, you should be able to update that one option and refresh the slideshow using the method slickSetOption. This would obviate the need for unslick-ing and reloading your slideshow. For example: carousel.slickSetOption('swipe', false, true).

From the docs at 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.

  • 发表于 2020-06-27 19:18
  • 阅读 ( 127 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除