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----- -----