Как определить, с какой карусели взаимодействует пользователь в карусели?

Question

У меня есть страница, содержащая несколько каруселей Slick. Мне нужно применить класс к контейнеру карусели, когда первый слайд активен.

Как можно обновить следующий код, чтобы класс применялся к правильной карусели, которая соответствует той, с которой взаимодействует пользователь?

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

Answer 1

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

Loop корыта каждый .carousel, вы можете установить $ (это) в переменную, если вам нужно выбрать карусель на кнопку мыши в качестве примера.