CODEWITHSUNDEEP
jqueryslick.js
friendly_llama
friendly_llama

Reputation: 349

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.

Upvotes: 8

Views: 24922

Answers (4)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

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

Upvotes: 2

Martin Matjulski
Martin Matjulski

Reputation: 51

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

Upvotes: 5

Anima-t3d
Anima-t3d

Reputation: 3565

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

Upvotes: 11

Asaf David
Asaf David

Reputation: 3297

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

Upvotes: 6

Related Questions