kenwheeler/slick how to get current slide as a dom or jquery object?

Question

Using slick, I have a simple carousel along the lines of:

<div class="carousel">
  <div class="image"><img src="http://path/to/image.jpg" data-caption="Caption 1"></div>
  <div class="image"><img src="http://path/to/image2.jpg" data-caption="Caption 2"></div>
  <div class="image"><img src="http://path/to/image3.jpg" data-caption="Caption 3"></div>
</div>

I am initializing the carousel with an onAfterChange function to try to update the caption in another div but am a bit confused about how to get this div as a dom or jquery object?

$('.carousel').slick({
  lazyLoad: 'progressive',
  onAfterChange: function(slider,index){
    console.log(???);
  }
});

Where slider returns the carousel object and index returns the current slide.

How could I get the data-caption value out of this?

Answer 1

try this

$('.carousel').on('afterChange', function() {
    var dataId = $('.slick-current').attr("data-slick-index");    
    console.log(dataId);
});