当第一张幻灯片处于活动状态时，如何将“ first-slide-active”类应用于Slick轮播容器？

Question

I need to apply a hook using CSS when the first slide is active in a Slick carousel. 当第一张幻灯片在Slick轮播中处于活动状态时，我需要使用CSS来应用钩子。

How can I make it so .first-slide-is-active will always appear on the wrapper element, .carousel ? 如何使.first-slide-is-active始终出现在包装器元素.carousel ？

Here's what I've tried, but it isn't working. 这是我尝试过的方法，但是没有用。 It needs to work upon page load and when changing slides. 它需要在页面加载时和更改幻灯片时工作。

Please note: there can be multiple carousels within the same page. 请注意：同一页面上可以有多个轮播。

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

Answer 1

The below should help, callback methods are depricated according to the docs and events are used. 下面应该有帮助，根据文档描述回调方法，并使用事件。 'onAfterChange' is now 'afterChange'. “ 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');
    }
});

Full working example below: 完整的工作示例如下：

<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 个解决方案

解决方案1
1 已采纳 2016-02-09 18:12:18

当第一张幻灯片处于活动状态时，如何将“ first-slide-active”类应用于Slick轮播容器？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-09 18:12:18

解决方案1
1 已采纳 2016-02-09 18:12:18