如何在第一张幻灯片处于活动状态时将 'first-slide-active' class 应用于 Slick 轮播容器？

Question

当第一张幻灯片在 Slick 轮播中处于活动状态时，我需要使用 CSS 应用挂钩。

如何才能使 .first-slide-is-active 始终出现在包装元素上，.carousel？

以下是我尝试过的方法，但它不起作用。它需要在页面加载和更改幻灯片时工作。

请注意：同一页面中可以有多个轮播。

$('.carousel').slick( {
  onAfterChange: function(slider,index) {
    if (index === 0) {
      slider.addClass('first-slide-is-active');
    } else {
      slider.removeClass('first-slide-is-active');
    }
  }
})

Answer 1

以下内容应该有所帮助，回调方法已根据文档描述并使用了事件。 'onAfterChange' 现在是 'afterChange'。

$('.carousel').on('afterChange', function(event, slick, currentSlide){
    if (currentSlide === 0) {
        console.log('First element');
        $(this).eq(currentSlide).addClass('first-slide-is-active');
    } else {
        $(this).eq(currentSlide).removeClass('first-slide-is-active');
    }
});

下面是完整的工作示例：

<html>

<head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="slick.css" />
    <link rel="stylesheet" type="text/css" href="slick-theme.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript" src="slick.min.js"></script>
</head>

<body>

    <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 type="text/javascript">
        $(document).ready(function () {
            $('.carousel').slick({
                'setting-name': 'setting-value'
            });


            $('.carousel').on('afterChange', function (event, slick, currentSlide) {
                if (currentSlide === 0) {
                    console.log('First element');
                    $(this).eq(currentSlide).addClass('first-slide-is-active');
                } else {
                    $(this).eq(currentSlide).removeClass('first-slide-is-active');
                }
            });
        });
    </script>

</body>

</html>

如何在第一张幻灯片处于活动状态时将 'first-slide-active' class 应用于 Slick 轮播容器？

How to apply 'first-slide-active' class to Slick carousel container when first slide is active?

javascript

jquery

slick.js