Question

我使用slick.js http://kenwheeler.github.io/slick/来浏览一些幻灯片，最后一张幻灯片应该切换一个提醒。

经过一些网上搜索，并意识到这应该工作，而不必硬编码幻灯片的数量（并看到这个解决方案： Slick carousel. Want autoplay to play the slides once and stop），我已获得以下代码：

$(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函数缺少光滑所需的输入。这段代码应该修复它：

 $(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 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的解决方案可同时处理多张幻灯片

＆＃13;

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

＆＃13;

Answer 4

Live demo

这就是您所需要的！

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

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

4 个答案: