使用Slick旋转木马将类添加到以前的多张幻灯片中

Question

我正在尝试使用Slick carousel创建一个时间线。我试图实现的是，当你在时间轴上前进时，之前的所有幻灯片都保持彩色，当你回去时，它们会变回灰色。我在onAfterChange和onBeforeChange上尽了最大努力，但我不能针对多个以前的幻灯片，只能针对最后一张以前的幻灯片。

以下是我的时间表的JSFiddle：https://jsfiddle.net/23wL9ymv/

---

html

<div class="wrapper">
<div class="carrousel__candidature__timeline">
<div class="timeline-item p">Architecture</div>
<div class="timeline-item p">Design d’intérieur</div>
<div class="timeline-item p">Accrédités LEED</div>
<div class="timeline-item p">Spécialiste codes</div>
</div>
</div>

---

css

.wrapper {
max-width: 800px;
}
.slick-list {
width: 100%;
}
.carrousel__candidature__timeline {
.timeline-item {
width: auto;
height: auto;
background: transparent;
margin-bottom: 20px !important;
position: relative;
font-size: 14px;
line-height: 28px;
font-weight: 400;
outline: none;
cursor: pointer;
color: grey;
&::before {
content: "";
position: absolute;
top: 36px;
left: -100%;
width: 100%;
height: 2px;
background-color: grey;
transition: 0.2s;   
}
&::after {
content: "";
position: absolute;
top: 30px;
left: 0;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: grey;
transition: 0.2s;
z-index: 1000;
}
&.slick-current {
color: red;
}
&.slick-current::before {
background-color: red;
}
&.slick-current::after {
background-color: red;
}
}
}

---

js

$('.carrousel__candidature__timeline').slick({
slidesToShow: 4,
SlideToScroll: 1,
asNavFor: '.carrousel__candidature__content',
centerMode: false,
focusOnSelect: true,
mobileFirst: true,
arrows: false,
dots: false,
infinite: false,
variableWidth: false
});

Answer 1

这只适用于css，看看.slick-current类应用于活动元素的类，如果使用通用的同级选择器，则可以对该元素之后的所有内容进行样式设置。

因此，这些更改基本上包括默认情况下将所有内容设置为红色，然后将未激活的点设置为灰色。

.timeline-item {
//...
//color: gray remove this;
color: red;
&::before {
//...
//background-color: gray; remove this
background-color: red;
}
&::after {
//...
//background-color: gray; remove this 
background-color: red;
}
}
//Added at the bottom of the scss file
.slick-current ~ .timeline-item {
color: gray;
}
.slick-current ~ .timeline-item::before {
background-color: gray;
}
.slick-current ~ .timeline-item::after {
background-color: gray;
}

https://jsfiddle.net/vcsr6abm/