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

Arg, apologies, I found a solution on a github issue titled Accessing Current Slide Attributes in onAfterChange #411.

slider refers to the carousel, so one would access the slider so:

$(slider) and can access the particular slide with $(slider.$slides.get(index))

So in reference to my question above, it would be simply:

$(slider.$slides.get(index)).data('caption');