Un carroussel de imágenes en HTML
¿Cómo creamos un carrousel de imágenes o slider en HTML? Aquí te lo explico. Vamos por partes.
Código HTML
En primer lugar creá un “div”, y dentro del div colocá las imágenes. Tratá de que todas las imágenes tengan el mismo tamaño.
| <div class=”contenedor”> <img src=”imagen1.jpg” alt=”imagen1″> <img src=”imagen2.jpg” alt=”imagen2″> <img src=”imagen3.jpg” alt=”imagen3″> </div> |
Código CSS
Hacé que el div tenga una estructura de grid, con tantas columnas como imágenes.
Pero el secreto está en que todas las columnas tengan 100% de ancho.
Luego agregamos las propiedades animation y position.
Y finalizamos con la definición de los @keyframes
| .contenedor { display: grid; grid-template-rows: 200px; grid-template-columns: 100% 100% 100%; animation: carrousel 15s infinite; position: relative; } @keyframes carrousel { from { right: 0%; } 50% { right: 100%; } to { right: 200%; } } |
Imagen de Freepik