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

Question

我有一个包含多个 Slick 轮播的页面。当第一张幻灯片处于活动状态时，我需要将 class 应用于轮播容器。

如何更新以下代码，以便 class 应用于与用户交互的正确轮播？

<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，如果您需要 select 按钮点击轮播作为示例，您可以将 $(this) 设置为变量。

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

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

javascript

jquery

slick.js