slick.js 上次幻灯片放映警报

Question

我正在使用 slick.js http://kenwheeler.github.io/slick/来运行一些幻灯片，最后一个应该切换警报。

在网上摸索并意识到这应该可以工作而无需对幻灯片的数量进行硬编码（并且已经看到了这个解决方案： Slick carousel。想要自动播放一次并停止播放幻灯片），我得到了以下代码：

$(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"); } });

Answer 4

现场演示

这就是你所需要的！

$('#myslick').on('afterChange', function(event, slick, currentSlide) {
      if (slick.currentSlide >= slick.slideCount - slick.options.slidesToShow) {
        alert("Last slide!!!");
      }
});