kenwheeler / slick как получить текущий слайд в виде объекта dom или jquery?

Используя slick , у меня есть простая карусель по линиям: 

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

Я инициализирую карусель с помощью функции onAfterChange, чтобы попытаться обновить заголовок в другом div, но немного запутался в том, как получить этот div в качестве объекта dom или jquery?

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

Где slider возвращает объект карусели и index возвращает текущий слайд.

Как я могу извлечь из этого значение data-caption?

3 8
javascript jquery carousel

3 ответа:

Arg, прошу прощения, я нашел решение проблемы github под названием доступ к текущим атрибутам слайдов в onAfterChange #411.

slider относится к карусели, поэтому можно было бы получить доступ к слайдеру так:

$(slider) и может получить доступ к конкретному слайду с помощью $(slider.$slides.get(index))

Поэтому в отношении моего вопроса выше, это будет Просто: 

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

Попробуйте это

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

Перед Изменением 

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