16

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?

Improve this question

4 Answers 4

Reset to default
16 
$('.SlickContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){ var CurrentSlideDom=$(slick.$slides.get(currentSlide)); var NextSlideDom=$(slick.$slides.get(nextSlide)); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

15

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');
Improve this answer

1 Comment

You'll probably want to modify this, as $(slider.$slides.get(index)) will return the DOM node of the Slick slide wrapper. Using current doc variables names (for afterChange event), I came to this : jQuery(slick.$slides.get(currentSlide)).find('.your-slide-selector').data('your-data-attr').
9

try this

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

1 Comment

still works great in 2022
1

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')); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.