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

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

<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 значение из этого?

8
carousel javascript jquery

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