Primero que todo comentar que soy nuevo en esto de Javascript, por lo que tal vez sea algo fácil de realizar pero la verdad es que no sé cómo. Bueno, a lo que voy:
Estoy realizando una página con HTML5, CSS3 y un poco de Javascript vanilla. El problema surge en que tengo el siguiente slider:
Este slider es automático, por lo que va quitando la clase active a cada slide conforme pasa una por una en estos. El problema surge en los apartados del carrito y de búsqueda, ya que al tener integradas también la clase active, cada vez que el slide se cambia automáticamente se cierran dichos apartados.
La duda que tengo es que si hay alguna forma de filtrar que solo quiero tomar los slides y no los demás elementos active o si me pudieran brindar otra solución. El script del slide automático es el siguiente:
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();
El menú de navegación de abajo también va cambiando conforme avanza el slider (los 5 puntos de abajo). Debido a esto es que se define que tome todos los "active", pero no tomé en cuenta los apartados comentados anteriormente.
Código HTML:
<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>
<div class="slide active">
. Y cambiagetElementsByClassName('active')
porgetElementsByClassName('slide active')
. Si cargas el código HTML te podremos ayudar mejor.