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');
    }
});

Answer 2

您可以使用Slick的onAfterChange回调。

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  slide: 'div',
  cssEase: 'linear',
  onAfterChange: function(slider){
    if(slider.currentSlide === 0){
      $('.slider').slickPause();
    };
  }
});

这是a demo

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

2 个答案: