kenwheeler/slick Wie bekomme ich aktuelle Folie als dom oder jquery Objekt?

Question

Mit slick, ich habe ein einfaches Karussell entlang der Linien von:

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

Ich bin das Karussell mit einer onAfterChange Funktion initialisiert, um zu versuchen die Beschriftung in einem anderen div zu aktualisieren, aber ich bin ein wenig verwirrt darüber, wie diese zu erhalten Div als dom oder jquery Objekt?

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

Wo slider das Karussell Objekt zurückzugibt und index gibt die aktuelle Folie. Wie kann ich den data-caption Wert daraus erhalten?

Answer 1

Arg, Entschuldigung, ich fand eine Lösung auf einer GitHub-Ausgabe mit dem Titel Accessing Current Slide Attributes in onAfterChange #411.

slider bezieht sich auf das Karussell, so würde man den Schieber zugreifen so:

$(slider) und die bestimmte Folie mit $(slider.$slides.get(index))

So oben in Bezug auf meine Frage zugreifen kann, wäre es einfach sein:

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

Answer 2

versuchen diese

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

Answer 3

Before Change

jQuery('.pt-slick-carousel__slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
     console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index')); 
     console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id')); 
}); 

AfterChange

jQuery('.pt-slick-carousel__slides').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
     console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index')); 
     console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id')); 
});