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

您的 onAfterChange 函数缺少 slick 所需的输入。此代码应该修复它：

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

注意索引[0]是第一张幻灯片

Answer 2

对于来自未来的人来说，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 3

这个基于 Anima-t3d 的解决方案同时处理多个幻灯片

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

Answer 4

Live demo

这就是您所需要的！

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

slick.js 最后一张幻灯片放映提醒

slick.js on last slide show alert

jquery

slick.js