1

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:introducir la descripción de la imagen aquí

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>

2
  • ¿Por qué no le agregas, por ejemplo una clase "slide" a los elementos que sí quieres que modifique el código? Entonces si los slides son divs, su html se vería así: <div class="slide active">. Y cambia getElementsByClassName('active') por getElementsByClassName('slide active'). Si cargas el código HTML te podremos ayudar mejor.
    – Mateo
    Commented el 30 sept. 2022 a las 4:27
  • Gracias por tu respuesta. La realidad es que así lo tengo con un div class slide, pero tomare la recomendación que me das y subiré el HTML. Commented el 30 sept. 2022 a las 4:30

2 respuestas 2

2

Necesitas obtener todos los elementos del slider, no solo los que tengan clase activa, porque siempre será solo uno y no podrás acceder al resto.

Te sugiero usar querySelectorAll() en lugar de getElementsByClassName() porque me parece más fácil de manejar.

Además, podrías agregar funcionalidad a los botones para que no solo sean indicadores del elemento activo, sino también acciones para que el usuario seleccione el que desea ver y, de ser el caso, conviene crear un temporizador y limpiarlo antes de avanzar para evitar comportamientos no deseados.

Revisa los comentarios en el código y pregunta si tienes alguna duda.

const repeat = function(activeClass) {
    // Definir variable para temporizador
    let timer = null;
    // Obtener todos los elementos
    const slides = document.querySelectorAll('.slider .slide');
    // Obtener índice del elemento activo
    let index = Array.from(slides).findIndex(slide => slide.classList.contains(activeClass));
    // ¿No hay elemento activo?
    if(index < 0) {
        // Activar el primero
        slides[0].classList.add(activeClass);
        index = 0;
    }
    const repeater = () => {
        // Limpiar temporizador si es que vas a activar con otros eventos
        clearTimeout(timer);
        timer = setTimeout(function() {
            // Quitar clase del elemento activo
            slides[index].classList.remove(activeClass);
            // Incrementar índice y comprobar
            index ++;
            if(index >= slides.length - 1) {
                index = 0;
                // Si no quieres que reinicie, sales con return;
            }
            // Activar el nuevo elemento
            slides[index].classList.add(activeClass);
            repeater();
        }, 1000); // Ajuste el tiempo solo para probar aquí
    }
    repeater();
}

repeat('active');
.slider .slide {
    display: none;
}
.slider .slide.active {
    display: block;
}
<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>
    </section>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 002</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>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 003</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>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 004</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>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 005</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>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 002</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>
    <section class="slider">
        <div class="slide">
            <div class="content">
                <h2>Slide 005</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>

3
  • Gracias por tu respuesta. Es precisamente lo que queria conseguir. Ahora con lo que dices del menu, la realidad es que tambien sirve para controlar los slides tal como tu dices, por lo que ahora el problema con estos es que cuando lo cambio con los botones de abajo el slide automatico siguiente es desde donde se quedo y no el siguiente despues del seleccionado. Ejemplo: Si el automatico iba en el slide 3 y yo selecciono del 2, cuando vuelve a cambiar automaticamente se dirige al slide 4 y no al 3. Como soluciono eso? Commented el 1 oct. 2022 a las 5:44
  • Esta respuesta soluciona el problema original, por lo que es conveniente crear otra pregunta donde expliques lo que has hecho, lo que falla e incluyas tu código actualizado.
    – Triby
    Commented el 3 oct. 2022 a las 0:48
  • Ok, muchas gracias. Igual ya lo logre solucionar pero todo fue gracias a tu respuesta, así que te lo agradezco mucho :D Commented el 4 oct. 2022 a las 16:30
1

Cambia la 2ª linea de tu js para document.querySelectorAll('.slider .active') y deberá funcionar. Además, si solo puedes tener un slide activo a cada vez puedes hacer document.querySelector('.slider .active') y así no necessitas del forEach.

3
  • Gracias por tu respuesta. No se si te confundiste o tu solución es así pero el div que tiene el active es el slide, no el slider. Otra pregunta, con respecto a tu solución, en donde coloco el .remove para que le quite el active al slide anterior? Y también, la solución aplicaría también para el menú de navegación de abajo? Commented el 30 sept. 2022 a las 15:29
  • No creo haberme confundido. document.querySelector('.slider .active') obtiene un elemento con la classe active dentro de un elemento con la classe slider. Creo que funcionara, lo hás intentado?
    – dfvc
    Commented el 30 sept. 2022 a las 16:07
  • Si lo probe pero no super despues donde agregar el .remove :( Como dije, soy nuevo Commented el 1 oct. 2022 a las 5:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.