如何确定用户在Slick Carousel中与哪个轮播进行交互？

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

循环到每个.carousel，如果您需要在按钮上单击一个轮播作为示例，则可以将$（this）设置为变量。