jquery - Slick.js - 循环回到第一张幻灯片后暂停幻灯片放映

Question

我正在使用 slick.js 幻灯片库，并且我试图在幻灯片循环回到第一张幻灯片后基本上暂停幻灯片。我知道我必须使用“slickCurrentSlide”和“slickPause”方法做一些事情。但我似乎无法让它发挥作用。谢谢!!!

    <div class="slideshow">
      <div><img src="img/bg1.jpg" alt="bg1" /></div>
      <div><img src="img/bg2.jpg" alt="bg2" /></div>
      <div><img src="img/bg3.jpg" alt="bg3" /></div>
      <div><img src="img/bg4.jpg" alt="bg4" /></div>
      <div><img src="img/bg5.jpg" alt="bg5" /></div>
    </div>


      var currentSlide = $('.slideshow').slick('slickCurrentSlide');

    $('.slideshow').on('beforeChange', function pauseSlideShow(event, slick, currentSlide, nextSlide){

      console.log("this is slide #" + currentSlide);

        setTimeout(function() {
          if (nextSlide === 0) {
            console.log("Yay!!! we're back to 1");
            $('.slideshow').slickPause(); 
          };
        }, 3000);

  });

Answer 1

如果幻灯片最终回到第一张幻灯片，无论是通过自动播放、滑动还是使用上一张/下一张控件，这都会暂停幻灯片放映。

示例:http://jsfiddle.net/55eow2ft/

var $slider = $(".slider").slick({
    autoplay: true
})
.on('afterChange', function( e, slick, currentSlide ) {
    if( currentSlide == 0 ) {
        $slider.slick('slickPause');
        console.log('paused');
    }
});