After the 1.4 update to Slick carousel, the method to pull data attributes from the current slide changed.

The previous method which worked:

onAfterChange: function(slide, index) {
   $('.project-caption').find('p').replaceWith("<p>" + $(slide.$slides.get(index)).data('description') + "</p>");
}

Now the documentation says to call current slide after change like this:

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

I've tried everything I know to get the data attribute using the new method.

Author show me how to get the current Slide as an integer here: /

But does anyone know how to get the current slide data-attributes?

After the 1.4 update to Slick carousel, the method to pull data attributes from the current slide changed.

The previous method which worked:

onAfterChange: function(slide, index) {
   $('.project-caption').find('p').replaceWith("<p>" + $(slide.$slides.get(index)).data('description') + "</p>");
}

Now the documentation says to call current slide after change like this:

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

I've tried everything I know to get the data attribute using the new method.

Author show me how to get the current Slide as an integer here: http://jsfiddle/3b4kqy9p/

But does anyone know how to get the current slide data-attributes?

• javascript
• jquery
• slick.js

2 Answers 2

You can access the $slides array from the slick object:

var elSlide = $(slick.$slides[currentSlide]);
var materials = elSlide.data('materials');

I have updated the jsfiddle here

Inside your event handler put:

var activeSlide = $('#carousel').find('.slick-active');
var year = activeSlide.data('year');

this works based on the class changing made by the plugin.