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

以下应该有所帮助，根据使用的文档和事件来描述回调方法。＆＃39; onAfterChange＆＃39;现在＆＃39; afterChange＆＃39;。

$('.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'类应用于Slick轮播容器？

1 个答案: