最后一张幻灯片上的slick.js显示警报

Question

我正在使用slick.js http://kenwheeler.github.io/slick/来浏览一些幻灯片,其中最后一个应切换警报.

经过一些在线浏览,并意识到这应该工作,而不必硬编码幻灯片的数量(并看到这个解决方案: 光滑的旋转木马.想要自动播放幻灯片播放一次并停止),我有以下代码:

$(document).ready(function(){
          var item_length = $('.slider > div').length - 1;
          $('.slider').slick({
            appendArrows : '.arrow-holder',
            adaptiveHeight : true,
            infinite : false,
            onAfterChange: function(){
                if( item_length == slider.slickCurrentSlide() ){
                    alert("Slide 2");
                };
            }
          }); 
        });

不幸的是,当我到达最后一张幻灯片时没有任何事 即使考虑到零索引,如果我在最后一个数字中执行硬编码也似乎也没有.

我在控制台中没有错误或警告,所以我正在努力找出如何找出问题.

Answer 1

对于未来的人们来说，API 已经发生了变化。这就是我现在正在使用的：

$(this).on('afterChange', function(event, slick, currentSlide) {
  console.log(slick, currentSlide);
  if (slick.$slides.length-1 == currentSlide) {
    console.log("Last slide");
  }
})

注意：this可以替换为选择器，例如.slider

Answer 2

你的onAfterChange函数缺少光滑所需的输入.这段代码应该修复它:

 $(document).ready(function(){
      var item_length = $('.slider > div').length - 1;
      $('.slider').slick({
        appendArrows : '.arrow-holder',
        adaptiveHeight : true,
        infinite : false,
        onAfterChange: function(slide, index){
            if( item_length == index ){
                alert("Slide 2");
            };
        }
      }); 
    });

请注意,index [0]是第一张幻灯片

Answer 3

该解决方案基于 Anima-t3d，可同时处理多张幻灯片

$(this).on('afterChange', function(event, slick, currentSlide){
    if (slick.$slides.length == currentSlide + slick.options.slidesToScroll) {
        console.log("Last slide");
    }
});