How to get a slide element in an event, in Slick Carousel?

Question

Slick Carousel: http://kenwheeler.github.io/slick/

How can I get the element of the slide in an event? For example:

   .on('afterChange', function (slick, currentSlide)
   {
      var currentSlideElement = //Get current slide element here
   });

The first argument seems to be the event object, but its target (or currentTarget) is always the slides container, and second argument seems to be the slick object....

Reprehensible

Answer 1

you need to include the first argument "event" like this

$('.your-element').on('afterChange', function(event, slick, currentSlide){
  console.log(currentSlide);
});    

or else your "currentSlide" argument will be "slick"

Macfarlane

Thanks. Your answer helped me towards the right direction. currentSlide returns a number, and then I can select the element via the data-slick-index attribute, e.g. $("[data-slick-index='"+currentSlide+"']);. – Reprehensible

Is there a way to access previous slide on afterChange event? – Audiophile

@max: $("[data-slick-index='"+(currentSlide-1)+"']); – Reprehensible

@YuvalA that won't work when moving back a slide or when using slickGoTo – Wabble

Answer 2

To get the DOM element on 'afterChange' event:

$('.your-element').on('afterChange', function (event, slick, currentSlide) {
    var elt = slick.$slides.get(currentSlide);
});

Onstad

Answer 3

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

Source: https://github.com/kenwheeler/slick

Curriery

Just in case it can save someone some time, this returns the index of the current slide, but if you want the current slide as a jQuery object you can just use var currentSlide = $( '.your-element .slick-current' ); – Atrophied

Answer 4

The 'currentSlide' parameter does not work as expected if you are displaying multiple slides at once.

The way I have found in this instance is with the 'slick-current' class that gets added to the current slide.

e.g. where slider is the HTML element wrapper for you carousel:

$('.your-element').on('afterChange', function(event, slick, currentPage){
    var currentIndex = parseInt(slider.querySelector('.slick-current').getAttribute('data-slick-index'));
}); 

Wabble