kenwheeler/slick come ottenere la diapositiva corrente come un oggetto dom o jquery?

Question

Utilizzando slick, ho una semplice giostra lungo le linee di:

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

sto inizializzazione del carosello con una funzione onAfterChange per cercare di aggiornare la didascalia in un altro div, ma sono un po 'confuso su come ottenere questo div come un oggetto dom o jquery?

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

Dove slider restituisce l'oggetto giostra e index restituisce la diapositiva corrente.

Come è possibile ottenere il valore data-caption da questo?

Answer 1

Arg, scusa, ho trovato una soluzione su un problema github denominato Accessing Current Slide Attributes in onAfterChange #411.

slider si riferisce alla giostra, così si potrebbe accedere il dispositivo di scorrimento in modo da:

$(slider) e può accedere il vetrino particolare $(slider.$slides.get(index))

Quindi, in riferimento alla mia domanda di cui sopra, sarebbe semplicemente:

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

Answer 2

provare questo

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

Answer 3

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