Clever Geek Handbook

Slick.js in the last slideshow

I am using slick.js http://kenwheeler.github.io/slick/ to trigger some slides, the last one should include a warning.

After trying several times online and realizing that this should work without having to hard-code the number of slides (and after seeing this solution: Carousel. Want to autoplay the slides once and stop ), I have 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 get to the last slide. It doesn't look like I'm doing hardcoded in the last issue, even taking zero indexing into account.

I don't have any errors or warnings in the console, so I'm trying to figure out how to fix the problem.

+3


source to share


3 answers


Your onAfterChange function is missing the required input from the spot. 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

+5


source


This Anima-t3d based solution 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");
    }
});
Run code


+1


source


For people in 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 a selector eg..slider

0


source






More articles:


All Articles