CODEWITHSUNDEEP
javascriptjquerycarouselslick.js
Yuval A.
Yuval A.

Reputation: 6089

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

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....

Upvotes: 15

Views: 32400

Answers (4)

anotheruser1488182
anotheruser1488182

Reputation: 335

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

Upvotes: 0

Vénizia
Vénizia

Reputation: 581

To get the DOM element on 'afterChange' event:

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

Upvotes: 12

Leonid Usachov
Leonid Usachov

Reputation: 341

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

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

Upvotes: 5

Abraham Uribe
Abraham Uribe

Reputation: 3118

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"

Upvotes: 21

Related Questions