Carousel indicators active

Question

I'm trying to change the indicators color when a slide is active. So when you click the indicators the slide change, but the indicators doesn't change color. I only set the .bar:hover with a border color of white. I also tried :active :checked but nothing works... but I can't figure out how to do this.

CAROUSEL HTML:

CAROUSEL CSS:

    .slidershow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.center {
    transform: translate (-50% , -50%);
}

.navigation {
    position: relative;
    bottom: 0;
    left: 32%;
    transform: translateX (-50%);
    display: flex;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .slidershow {
        display: none;
    }
}

.bar {
    width: 50px;
    height: 1px;
    border: 2px solid grey;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover {
    border-color: white;
}


input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides {
    width: 1000%;
    height: 100%;
    display: flex;
}

.slida {
    width: 10%;
    transition: 0.6s;
}

.slida img {
    width: 100%;
    height: 100%;
}


#r1:checked ~ .s1 {
    margin-left: 0;
}

#r2:checked ~ .s1 {
    margin-left: -10%;
}

#r3:checked ~ .s1 {
    margin-left: -20%;
}

#r4:checked ~ .s1 {
    margin-left: -30%;
}

#r5:checked ~ .s1 {
    margin-left: -40%;
}

 #r6:checked ~ .s1 {
    margin-left: -50%;
} 

#r7:checked ~ .s1 {
    margin-left: -60%;
}  

.carousel img {
    width: 100%;
}

user_13573444 · Answer

Hope I understood you correctly. Just add this script:

let bar = document.querySelectorAll('.bar');

let select_bar = (event) => {
  [...bar].forEach(link => link.classList.remove('active_bar'));
  event.target.classList.add('active_bar');
}

[...bar].forEach(e => e.addEventListener('click', select_bar));

And add this selector to your css (you can make your own style rules for the active bar):

.active_bar {
    border: 2px solid red;
    background-color: red;
}

Was it necessary?

let bar = document.querySelectorAll('.bar');

let select_bar = (event) => {
  [...bar].forEach(link => link.classList.remove('active_bar'));
  event.target.classList.add('active_bar');
}

[...bar].forEach(e => e.addEventListener('click', select_bar));

.slidershow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.center {
    transform: translate (-50% , -50%);
}

.navigation {
    position: relative;
    bottom: 0;
    left: 32%;
    transform: translateX (-50%);
    display: flex;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .slidershow {
        display: none;
    }
}

.bar {
    width: 50px;
    height: 1px;
    border: 2px solid grey;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.active_bar {
    border: 2px solid red;
    background-color: red;
}

.bar:hover {
    border-color: white;
}


input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides {
    width: 1000%;
    height: 100%;
    display: flex;
}

.slida {
    width: 10%;
    transition: 0.6s;
}

.slida img {
    width: 100%;
    height: 100%;
}


#r1:checked ~ .s1 {
    margin-left: 0;
}

#r2:checked ~ .s1 {
    margin-left: -10%;
}

#r3:checked ~ .s1 {
    margin-left: -20%;
}

#r4:checked ~ .s1 {
    margin-left: -30%;
}

#r5:checked ~ .s1 {
    margin-left: -40%;
}

 #r6:checked ~ .s1 {
    margin-left: -50%;
} 

#r7:checked ~ .s1 {
    margin-left: -60%;
}  

.carousel img {
    width: 100%;
}

Carousel indicators active

1 Answers