Slick slider -添加类到'slick-active‘

Question

我正在与滑块工作。

有没有人知道如何在“slick-active”滑块中添加一个类？

我正在放映3张幻灯片，我希望每张幻灯片都有一个不同的类:一个类用于左侧幻灯片，另一个用于中间，另一个用于右侧幻灯片。

例如，对于活动的左侧幻灯片：“slick- active - left”。

​

​

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 {样式属性}

这称为相邻选择器或下一个同级选择器。它将只选择紧跟在前一个指定元素后面的指定元素。

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

您可以不向每个滑块添加类，而是已经使用子选择器将它们作为目标，将左侧幻灯片第n个子幻灯片(1)、中间幻灯片第n个子幻灯片(2)和最后一个幻灯片第n个子幻灯片(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