javascript - 如何确定用户正在与 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) 设置为变量。