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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *