jquery - 如何在单击和拖动时停止 Slick Slider 自动播放

Question

我正在使用 Ken Wheeler 的 Slick，并希望在用户单击 slick-prev 或 slick-next 或向左或向右拖动轮播时将自动播放设置为 false。

slick = $('.slick').slick({
        slidesToShow: 3,
        slidesToScroll: 2,
        autoplay: true,
        autoplaySpeed: 2500,
        dots: false,
      });

我尝试了以下

$('.slick-prev, .slick-next').on('click', function(){
        slick.slickSetOption('autoplay', false, false);
});

和

$('.slick-prev, .slick-next').on('click', function(){
        $(slider).slick('slickSetOption', 'autoplay', false, false);
    });

两者都不起作用，我不确定如何查找可拖动事件。

Answer 1

更新

您需要使用 slickSetOption像下面这样:

HTML

<div class="my-slick">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

JS

var slickOptions = {
        autoplay: true,
        // rest of options
    },
    $slick = $('.my-slick');

$slick.slick(slickOptions);

// built-in feature, for more info check the [doc](http://kenwheeler.github.io/slick/)
$slick.on('swipe', function(event, slick, direction) {
    reinitSlick();
});

$('.slick-prev, .slick-next').on('click', function(){
    reinitSlick();
});

var reinitSlick = function() {    
    $slick.slick('slickSetOption', {
      'autoplay': false
    }, false);
}

Codepen