1

Al querer agregar el segundo carousel debajo del primero no me funcionan las flechas para desplazarme. si alguien tiene una solucion para esto por favor?

Intene copiando y pegando el mismo codigo del carousel 1 pero obtengo varios errores por mas que le cambie de nombre los class="" no lo logre las flechas no funcionan para desplazarme

Alguna ayuda podrian darme por favor?

Al querer agregar el segundo carousel debajo del primero no me funcionan las flechas para desplazarme. si alguien tiene una solucion para esto por favor?

Intene copiando y pegando el mismo codigo del carousel 1 pero obtengo varios errores por mas que le cambie de nombre los class="" no lo logre las flechas no funcionan para desplazarme

Alguna ayuda podrian darme por favor?

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel / Slider con Glider.js</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/glider.min.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <nav class="troya">
        <a class="troya-logo">
          <img src="logo/logo.jpg" width="100">
        </a>
        <ul class="nav sf-menu">
           <!--otros li-->
        </ul>
    </nav>


    <div class="contenedor">

        <main class="contenido-principal">
            <img src="img/1.jpg" alt="Dome of the German Bundestag" class="contenido-principal__imagen">
            <div class="contenido-principal__contenedor">
                <h1 class="contenido-principal__titulo">Dome of the German Bundestag</h1>
                <p class="contenido-principal__resumen">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a commodo orci. Nulla ipsum ante, auctor a odio id, bibendum accumsan mauris.
                </p>
                <p class="contenido-principal__resumen">
                    Fusce malesuada mollis ante, at elementum mi maximus nec. Praesent volutpat, tortor sed condimentum sagittis, mi diam fringilla nibh.
                </p>
            </div>



        </main>

        <div class="carousel">
            <div class="carousel__contenedor">
                        <button aria-label="Anterior" class="carousel__anterior">
                            <i class="fas fa-chevron-left"></i>
                        </button>
<h3>Peliculas mas populares</h3>
<div class="carousel__lista">
    <div class="carousel__elemento">
        <img src="img/2.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/3.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/4.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/5.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/6.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/7.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
        <img src="img/8.jpg" alt="Rock And Roll">
        <p></p>
    </div>

    <div class="carousel__elemento">
    <a href="#"><img src="img/9.jpg" alt="Rock And Roll"></a>
 <p></p>
    </div>




</div>



                        <button aria-label="Siguiente" class="carousel__siguiente">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                </div>

                            <div role="tablist" class="carousel__indicadores"></div>

    </div>
</div>

</div>



<!--- CAROUSEL 1 NETFLIX ----->





<div class="peliculas-recomendadas contenedor">
    <div class="contenedor-titulo-controles">
        <h3>Peliculas Recomendadas</h3>
        <div class="indicadores"></div>
    </div>




    <div class="contenedor-principal">
                <button role="button" id="flecha-izquierda" class="flecha-izquierda">
                    <i class="fas fa-angle-left"></i>
                </button>

<div class="contenedor-carousel">
    <div class="carousel">

<div class="pelicula">
            <a href="#"><img src="img2/1.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/2.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/3.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/4.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/5.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/6.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/7.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/8.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/9.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/10.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/11.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/12.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/13.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/14.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/15.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/16.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/17.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/18.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/19.jpg" alt="Recomendadas"></a>
</div>

<div class="pelicula">
            <a href="#"><img src="img2/20.jpg" alt="Recomendadas"></a>
</div>

</div>
</div>



            <button role="button" id="flecha-derecha" class="flecha-derecha">
                <i class="fas fa-angle-right"></i>
            </button>
        </div>


</div>
</div>





    <script src="https://cdn.jsdelivr.net/npm/[email protected]/glider.min.js"></script>
    <script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
    <script src="js/app2.js"></script>
  <script src="js/app3.js"></script>

</body>
</html>

script.js

const fila = document.querySelector('.contenedor-carousel');
const peliculas = document.querySelectorAll('.pelicula');

const flechaIzquierda = document.getElementById('flecha-izquierda');
const flechaDerecha = document.getElementById('flecha-derecha');


// ? ----- ----- Event Listener para la flecha derecha. ----- -----
flechaDerecha.addEventListener('click', () => {
    fila.scrollLeft += fila.offsetWidth;

    const indicadorActivo = document.querySelector('.indicadores .activo');
    if(indicadorActivo.nextSibling){
        indicadorActivo.nextSibling.classList.add('activo');
        indicadorActivo.classList.remove('activo');
    }
});

// ? ----- ----- Event Listener para la flecha izquierda. ----- -----
flechaIzquierda.addEventListener('click', () => {
    fila.scrollLeft -= fila.offsetWidth;

    const indicadorActivo = document.querySelector('.indicadores .activo');
    if(indicadorActivo.previousSibling){
        indicadorActivo.previousSibling.classList.add('activo');
        indicadorActivo.classList.remove('activo');
    }
});

// ? ----- ----- Paginacion ----- -----
const numeroPaginas = Math.ceil(peliculas.length / 5);
for(let i = 0; i < numeroPaginas; i++){
    const indicador = document.createElement('button');

    if(i === 0){
        indicador.classList.add('activo');
    }

    document.querySelector('.indicadores').appendChild(indicador);
    indicador.addEventListener('click', (e) => {
        fila.scrollLeft = i * fila.offsetWidth;

        document.querySelector('.indicadores .activo').classList.remove('activo');
        e.target.classList.add('activo');
    });
}

// ? ----- ----- Hover ----- -----
peliculas.forEach((pelicula) => {
    pelicula.addEventListener('mouseenter', (e) => {
        const elemento = e.currentTarget;
        setTimeout(() => {
            peliculas.forEach(pelicula => pelicula.classList.remove('hover'));
            elemento.classList.add('hover');
        }, 100);
    });
});

fila.addEventListener('mouseleave', () => {
    peliculas.forEach(pelicula => pelicula.classList.remove('hover'));
});


// ? ----- ----- 2222222222222222----- -----

1 respuesta 1

1

he estado viendo tu código y la librería que utilizas. Lo que te paso a continuación es una maqueta funcional de dos carousels funcionando en la misma pagina. No obstante aclaro que no respeta las clases que indicaste, porque los códigos de las mismas no los has incluido.

Así que los reemplacé por códigos standard. el HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel / Slider con Glider.js</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <div class="container">
        <div class="glider-contain" style="width: 100%;">
            <div id="glider1">
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
            </div>

            <button aria-label="Previous" class="glider-prev" id="glider-prev1"><i class="fas fa-chevron-left fa-lg "></i></button>
            <button aria-label="Next" class="glider-next" id="glider-next1"><i class="fas fa-chevron-right fa-lg"></i></button>

            <div role="tablist" id="dots1"></div>
        </div>
    </div>

    <div class="container">
        <div class="glider-contain" style="width: 100%;">
            <div id="glider2">
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
            </div>

            <button aria-label="Previous" class="glider-prev" id="glider-prev2"><i class="fas fa-chevron-left fa-lg "></i></button>
            <button aria-label="Next" class="glider-next" id="glider-next2"><i class="fas fa-chevron-right fa-lg"></i></button>

            <div role="tablist" id="dots2"></div>
        </div>
    </div>



<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<script defer src="https://pro.fontawesome.com/releases/v5.10.0/js/all.js" integrity="sha384-G/ZR3ntz68JZrH4pfPJyRbjW+c0+ojii5f+GYiYwldYU69A+Ejat6yIfLSxljXxD" crossorigin="anonymous"></script>

</body>
</html>

el SCRIPT

<script>
    window.addEventListener('load', function(){
        new Glider(document.getElementById('glider1'), {
            slidesToShow: 1,
            dots: '#dots1',
            draggable: true,
            arrows: {
                prev: '#glider-prev1',
                next: '#glider-next1'
            },
            easing: function (x, t, b, c, d) {
                return c*(t/=d)*t + b;
            }
        });
    });

    window.addEventListener('load', function(){
        new Glider(document.getElementById('glider2'), {
            slidesToShow: 1,
            dots: '#dots2',
            draggable: true,
            arrows: {
                prev: '#glider-prev2',
                next: '#glider-next2'
            },
            easing: function (x, t, b, c, d) {
                return c*(t/=d)*t + b;
            }
        });
    });
</script>

    window.addEventListener('load', function(){
        new Glider(document.getElementById('glider1'), {
            slidesToShow: 1,
            dots: '#dots1',
            draggable: true,
            arrows: {
                prev: '#glider-prev1',
                next: '#glider-next1'
            },
            easing: function (x, t, b, c, d) {
                return c*(t/=d)*t + b;
            }
        });
    });

    window.addEventListener('load', function(){
        new Glider(document.getElementById('glider2'), {
            slidesToShow: 1,
            dots: '#dots2',
            draggable: true,
            arrows: {
                prev: '#glider-prev2',
                next: '#glider-next2'
            },
            easing: function (x, t, b, c, d) {
                return c*(t/=d)*t + b;
            }
        });
    });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel / Slider con Glider.js</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <div class="container">
        <div class="glider-contain" style="width: 100%;">
            <div id="glider1">
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
            </div>

            <button aria-label="Previous" class="glider-prev" id="glider-prev1"><i class="fas fa-chevron-left fa-lg "></i></button>
            <button aria-label="Next" class="glider-next" id="glider-next1"><i class="fas fa-chevron-right fa-lg"></i></button>

            <div role="tablist" id="dots1"></div>
        </div>
    </div>

    <div class="container">
        <div class="glider-contain" style="width: 100%;">
            <div id="glider2">
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
                <div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
            </div>

            <button aria-label="Previous" class="glider-prev" id="glider-prev2"><i class="fas fa-chevron-left fa-lg "></i></button>
            <button aria-label="Next" class="glider-next" id="glider-next2"><i class="fas fa-chevron-right fa-lg"></i></button>

            <div role="tablist" id="dots2"></div>
        </div>
    </div>



<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<script defer src="https://pro.fontawesome.com/releases/v5.10.0/js/all.js" integrity="sha384-G/ZR3ntz68JZrH4pfPJyRbjW+c0+ojii5f+GYiYwldYU69A+Ejat6yIfLSxljXxD" crossorigin="anonymous"></script>

</body>
</html>

Explicación de funcionamiento. Para que dos carousel funcionen simultáneamente, cada uno, incluyendo sus dots, botones e incluso el mismo carousel deben tener un id asociado que tiene que ser diferente. En mi caso utilice 1 y 2. Si te fijas, agregue un glider1, dots1, glider-prev1 y glider-next1 y su correspondiente 2. Debes llamar dos veces a dicha librería o crear dos instancias (una por cada carousel) Otra cosa importante es no modificar la clase, sino el ID. La clase se vincula con el funcionamiento de la librería, mientras que el ID se relaciona con la instancia. Por ultimo veo que el script que utilizaste para inicializar es algo complejo, hace cálculos y demás. No se si esto o agregaste tu o venia en el código. te sugiero revises el que viene en la pagina oficial link donde tendrás varios ejemplos interesantes.

Sugerencia final Entiendo que estás utilizando bootstrap. De ser así puedes considerar la utilización del que viene con el framework que es muy útil. Tal vez no tan vistoso como este que propones, pero muy eficiente. (link)

Ojala esta información sea de utilidad.

1
  • 1
    Gracias!! Pude solucionarlo!! Commented el 27 feb. 2021 a las 23:47

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.