slick.js on last slide show alert

问题

I'm using slick.js http://kenwheeler.github.io/slick/ to run through some slides, the last of which should toggle an alert.

After some ferreting around online and realizing that this should work without having to hard code the number of slides (and having seen this solution: Slick carousel. Want autoplay to play the slides once and stop ), I've got the following code:

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

Unfortunately, nothing happens when I reach the last slide. Nor does it seem to if I do hard code in the last number, even taking into account the zero indexing.

I have no errors or warnings in the console, so am struggling to work out how to figure out the problem.

回答1:

Your onAfterChange function is lacking the input it needs from slick. This code should fix it:

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

Note that index[0] is the first slide

回答2:

For people from the future, the API has changed. This is what I am using now:

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

Note: this can be replaced with the selector e.g. .slider

回答3:

This solution based on Anima-t3d's works with multiple slides at once

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

来源：https://stackoverflow.com/questions/30828831/slick-js-on-last-slide-show-alert

标签

jquery

slick.js