使用 Slick 轮播将 class 添加到多张以前的幻灯片

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 可以解决这个问题，查看 classes 你可以将 .slick-current class 应用于活动元素，如果你使用 general sibling selectors 您可以为该元素之后的所有内容设置样式。

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

.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/

使用 Slick 轮播将 class 添加到多张以前的幻灯片

Add class to multiple previous slides with Slick carrousel

javascript

css

slick.js