CODEWITHSUNDEEP
javascriptjqueryslick.js
Cofey
Cofey

Reputation: 11404

How to determine which carousel the user is interacting with in Slick Carousel?

I have a page that contains multiple Slick carousels. I need to apply a class to the carousel container when the first slide is active.

How can the following code be updated so class is applied to the correct carousel that matches the one the user is interacting with?

<div class="carousel" height="50px">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

<div class="carousel" height="50px">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

<script>
$(document).ready(function(){
  $('.carousel').slick();

  $('.carousel').on('afterChange', function(event, slick, currentSlide) {
    // how to select the correct carousel here??
    $(this).eq(currentSlide).addClass('first-slide-is-active');
  });
});
</script>

Upvotes: 0

Views: 67

Answers (1)

seahorsepip
seahorsepip

Reputation: 4809

$(document).ready(function(){
    $('.carousel').each(function() {
        $(this).slick();
        $(this).on('afterChange', function(event, slick, currentSlide) {
            $(this).eq(currentSlide).addClass('first-slide-is-active');
        });
    });
});

Loop trough each .carousel, you can set $(this) to a variable if you need to select a carousel on a button click as example.

Upvotes: 1

Related Questions