Slick 滑块 - 将类添加到“slick-active”

Question

我正在使用光滑的滑块。

有谁知道如何向“slick-active”滑块添加一个类？

我正在展示 3 张幻灯片，我想在每张幻灯片上设置不同的课程：左侧幻灯片的课程，中间的课程和右侧的幻灯片课程。

例如，对于活动的左滑：’slick-active-left’。

原文由 patie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

很简单，只需使用 相邻兄弟选择器 (+) .slick-active 进行第一场比赛， .slick-active + .slick-active 进行第二场比赛， .slick-active + .slick-active + .slick-active 进行第三场比赛：

 .slick-active {
  background: red;
}

.slick-active + .slick-active {
  background: blue;
}

.slick-active + .slick-active + .slick-active {
  background: yellow;
}

相邻兄弟选择器

前元素 + 目标元素 { 样式属性 }

这被称为相邻选择器或下一个兄弟选择器。它将仅选择紧跟在前一个指定元素之后的指定元素。

参考： https ://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

 $('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});

 .slider {
    width: 650px;
    margin: 0 auto;
}

img {
    width: 150px;
    height: 150px;
}

.slick-active {
  background: red;
}

.slick-active + .slick-active {
  background: blue;
}

.slick-active + .slick-active + .slick-active {
  background: yellow;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div>

原文由 Dalin Huang 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS 来定位它们，而不是为每个滑块添加一个类。使用子选择器来定位左侧幻灯片 nth-child(1)、中间幻灯片 nth-child(2) 和最后一张幻灯片 nth -孩子（3）。这是CSS：

 .slick-active: nth-child (1) {
/* Your CSS here */
}

更新为 CSS 解决方案没有解决问题，因为幻灯片类是通过 JS 添加的。您可以使用 jQuery 来定位幻灯片。只需确保它在 JS 文件之后加载。

 <script>
jQuery('.slick-active:nth-child(1)').addClass('first-slide');
</script>

原文由 Emma Earl Kent 发布，翻译遵循 CC BY-SA 3.0 许可协议