光滑的滑块 - 将类添加到“光滑 - 活动”状态。

Question

我正在使用光滑的滑块。

有没有人知道如何在“光滑活跃”中添加课程。滑块？

我正在展示3张幻灯片，我想在每张幻灯片上有一个不同的类：左侧幻灯片一个类，中心另一个类，右侧幻灯片另一个类。

例如，对于有效的左侧幻灯片：＆＃39; slick-active-left＆＃39;。

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;
}

  

相邻的兄弟选择器

     

former_element + target_element {style properties}

     

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

     

参考：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>

Answer 2

不是为每个滑块添加一个类，而是可以使用CSS定位它们。使用子选择器来定位左幻灯片，nth-child（1），中间幻灯片，nth-child（2）和最后一个幻灯片，n-child（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>

Answer 3

我认为实现目标的最佳原生方式应该是这样的：

$('#your-slider-element').slick({/configuration-object/}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
 $(this).find('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('customClass');
 $(this).find('.slick-slide[data-slick-index="'+currentSlide+'"]').removeClass('customClass');
});

在移动到新幻灯片之前，不要忘记删除自定义类！ 参考：http://kenwheeler.github.io/slick/ - 搜索beforeChange