slick.js on last slide show alert

Question

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.

Charo

Answer 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

Gorgias

This no longer works, see my answer for an updated version. – Detruncate

Answer 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

Detruncate

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

Galloway

You can use options.slidesToShow If options.slidesToScroll is 1. – Catina

Answer 4

Live demo

This is what you need!

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

Frizz