Slick 滑块 - 将类添加到“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;
}

相邻兄弟选择器

previous_element + target_element { 样式属性 }

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

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

.slick-active {
  background: red;
}

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

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

$('.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;
}