First of all comment that I am new to Javascript, so it may be something easy to do but the truth is that I do not know how. Well, to the point:
I'm making a page with HTML5, CSS3 and a bit of vanilla Javascript. The problem arises in that I have the following slider:
This slider is automatic, so it removes the active class from each slide as it passes through them one by one. The problem arises in the cart and search sections, since having the active class also integrated , each time the slide is changed automatically these sections are closed.
The doubt I have is that if there is any way to filter that I only want to take the slides and not the other active elements or if they could provide me with another solution. The automatic slide script is as follows:
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
var i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) =>{
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
current = i;
}
if(i>= slides.length){
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();
The navigation menu below also changes as the slider advances (the 5 points below). Due to this, it is defined that it takes all the "active", but I did not take into account the sections mentioned above.
HTML code:
<div class="container">
<button id="btn-left" class = "arrow" onclick = "previous()"><i class="fa-solid fa-chevron-left"></i></button>
<button id="btn-right" class = "arrow" onclick = "next()"><i class="fa-solid fa-chevron-right"></i></button>
<section class="slider">
<div class="slide active ">
<div class="content">
<h2>Slide 001</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slide 02</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slide 03</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slide 04</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slide 05</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
</section>
<div class="navigation">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>
You need to get all the elements of the slider, not just the ones with active class, because it will always be only one and you won't be able to access the rest.
I suggest you use
querySelectorAll()
instead ofgetElementsByClassName()
because I find it easier to handle.Also, you could add functionality to the buttons so that they are not only indicators of the active element, but also actions for the user to select the one they want to see and, if this is the case, it is a good idea to create a timer and clean it before advancing to avoid undesirable behavior. desired.
Check the comments in the code and ask if you have any questions.
Change the 2nd line of your js to
document.querySelectorAll('.slider .active')
and it should work. Also, if you can only have one active slide at a time you can dodocument.querySelector('.slider .active')
so and you don't need theforEach
.