Jhon Eduard Moreno Diaz
Preguntastudent•hace 4 años
Hola compañeros. Me gustaría saber por que el carrusel no me deja poner mas de 4 imagenes (Coloca la 5 y no aparece).
Adjunto codigo solo del carrusel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carrousel-1</title> </head> <style> body { margin: 0px; } .carousel { width: 100%; overflow: scroll; padding: 30px; position: relative; } .carousel__container { white-space: nowrap; margin: 70px 0px; padding-bottom: 10px; } .carousel-item { background-color: palevioletred; width: 200px; height: 250px; border-radius: 20px; overflow: hidden; margin-right: 10px; display: inline-block; cursor: pointer; transition: 450ms all; transform-origin: center left; position: relative; } .carousel-item:hover~.carousel-item { transform: translate3d(100px, 0, 0); } .carousel__container:hover .carousel-item { opacity: 0.3; } .carousel__container:hover .carousel-item:hover { transform: scale(1.5); opacity: 1; } .carousel-item__img { width: 200px; height: 250px; object-fit: cover; } .carousel-item__details { background: linear-gradient(to top, rgba(0, 0, 0, 0.9)0%, rgba(0, 0, 0, 0)100%); font-size: 10px; opacity: 0; transition: 450ms opacity; padding: 10px 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; flex-direction: column; } .carousel-item__details img{ height: 15px; } .carousel-item__details p{ margin: 0px; } .carousel-item__details:hover { opacity: 1; color: white; } </style> <body> <section class="carousel"> <div class="carousel__container"> <div class="carousel-item"> <img class="carousel-item__img" src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> <div class="carousel-item__details"> <div> <img src="https://img.icons8.com/flat-round/64/000000/play--v1.png"/> <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus"> </div> <p class="carousel-item__details--titile">Titulo descriptivo</p> <p class="carousel-item__details--subtitle">2019 16+ 114 min</p> </div> </div> <div class="carousel-item"> <img class="carousel-item__img" src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> <div class="carousel-item__details"> <div> <img src="https://img.icons8.com/flat-round/64/000000/play--v1.png"/> <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus"> </div> <p class="carousel-item__details--titile">Titulo descriptivo</p> <p class="carousel-item__details--subtitle">2019 16+ 114 min</p> </div> </div> <div class="carousel-item"> <img class="carousel-item__img" src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> <div class="carousel-item__details"> <div> <img src="https://img.icons8.com/flat-round/64/000000/play--v1.png"/> <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus"> </div> <p class="carousel-item__details--titile">Titulo descriptivo</p> <p class="carousel-item__details--subtitle">2019 16+ 114 min</p> </div> </div> <div class="carousel-item"> <img class="carousel-item__img" src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> <div class="carousel-item__details"> <div> <img src="https://img.icons8.com/flat-round/64/000000/play--v1.png"/> <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus"> </div> <p class="carousel-item__details--titile">Titulo descriptivo</p> <p class="carousel-item__details--subtitle">2019 16+ 114 min</p> </div> <div class="carousel-item"> <img class="carousel-item__img" src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> <div class="carousel-item__details"> <div> <img src="https://img.icons8.com/flat-round/64/000000/play--v1.png"/> <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus"> </div> <p class="carousel-item__details--titile">Titulo descriptivo</p> <p class="carousel-item__details--subtitle">2019 16+ 114 min</p> </div> </div> </div> </section> </body> </html>
Jhon Eduard Moreno Diaz
student•hace 4 años
Sii Dane muchas gracias, era eso. Debo fijarme mucho en la identacion. Saludos.
Danelia Sanchez Sanchez
student•hace 4 años
Pasa que el último elemento de tu carrusel
<div class="carousel-item">
