添加活动类的滑块

Question

Good evening, I have a slider. It works by adding active class to change background. I can add class ".active", but I can't remove class ".active" in blocks, where I don't need to have it in. It's need to be maximum one class "active" in classes "slider__image". So how can I remove this ".active" class correctly? Hope for you help! Thank you very much!

 let sliderImage = document.querySelectorAll('.slider__image'); let sliderActiveImage = document.querySelectorAll('.slider__image.active'); let sliderBtn = document.querySelectorAll('.slider-button'); for(let i = 0; i < sliderBtn.length; i++){ sliderBtn[i].addEventListener("click", function(){ sliderActiveImage.forEach((element) => { if(sliderImage[i] != element){ sliderImage[i].classList.add("active"); } }); }); }

 .slider { display: flex; justify-content: center; align-items: flex-end; position: relative; margin-top: 40px; border-radius: 25px; height: 400px; width: 900px; &__image { position: absolute; border-radius: inherit; width: 100%; height: 100%; opacity: 0; transform: translateX(100%); background-position: center center; background-size: cover; transition: transform 0.5s ease-in-out, opacity 0.5s linear; img { width: 100%; height: 100%; border-radius: inherit; } &.active { opacity: 1; transform: translateX(0%); } } .slider-btns { margin-bottom: 15px; z-index: 9999; label { margin: 0 20px; margin-bottom: 15px; position: relative; &::before { position: absolute; content: ""; width: 10px; height: 10px; display: inline-block; background-color: #fff; cursor: pointer; border-radius: 100%; } } input { display: none; &:checked + label::before { transition: 0.2s ease-in; width: 20px; border-radius: 8px; background-color: yellow; } } } }

 <div class="slider"> <div class="slider__image"><img src="/images/slider/pizza-background.jpg" alt=""></div> <div class="slider__image active"><img src="/images/slider/burger-background.jpg" alt=""></div> <div class="slider__image"><img src="/images/slider/soup-background.jpg" alt=""></div> <div class="slider__image"><img src="/images/slider/sushi-background.jpg" alt=""></div> <div class="slider-btns"> <input type="radio" name="slider button" id="slider-btn-1"> <label class="slider-button" for="slider-btn-1"></label> <input checked type="radio" name="slider button" id="slider-btn-2"> <label class="slider-button" for="slider-btn-2"></label> <input type="radio" name="slider button" id="slider-btn-3"> <label class="slider-button" for="slider-btn-3"></label> <input type="radio" name="slider button" id="slider-btn-4"> <label class="slider-button" for="slider-btn-4"></label> </div> </div>

Answer 1

I believe there are better ways to accomplish this with data attributes however using your example I have posted my solution. Since there will only be one active element at any time you don't need to querySelectorAll your active images. Instead you can simplify, Select only the active image at first then on each button click start by removing it. Then add the active class to the sliderImage[i] and reset your sliderActiveImage . Hope this helps.

Here is a link to show you what I mean.

https://codepen.io/bilcker/pen/bGNYaJZ#code-area

Replace your JS with:

let sliderImage = document.querySelectorAll('.slider__image');
let sliderActiveImage = document.querySelector('.slider__image.active');
let sliderBtn = document.querySelectorAll('.slider-button');

for(let i = 0; i < sliderBtn.length; i++){
    sliderBtn[i].addEventListener("click", function(){
        sliderActiveImage.classList.remove('active')
        sliderImage[i].classList.add("active");
        sliderActiveImage = sliderImage[i]
    });
}