Add class to multiple previous slides with Slick carrousel

user_7873564 0
Viewed 33

I'm trying to create a timeline using Slick carousel. What I'm trying to achieve is as you progress in the timeline, all the previous slides stay colored and when you go back they turn back to grey. I tried my best with onAfterChange and onBeforeChange but I can't target multiple previous slides, only the last previous slides.

Here's a JSFiddle of my timeline : 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
});
slick.js css javascript
1 Answers

That's fixable with css only, looking at the classes you have the .slick-current class being applied to the active element, if you use the general sibling selectors you can style everything that comes after that element.

So the changes consists of basically making everything red by default and then style the not active points to gray.

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

user_63983250
Related