Aprende a crear un carrusel automático en HTML y CSS sin Javascript de una forma muy sencilla y rápida gracias a la propiedad de CSS3 llamada animation. Sigue el paso a paso o simplemente reproduce el video para ver un ejemplo.
Carrusel automatico
Demostración en video
En el siguiente video podéis ver cómo se crea un carrusel de tres imágenes automático separando el código HTML y el código CSS en dos ficheros distintos.
Código HTML
Crea un fichero con extensión .html que contenga este código:
<html>
<head>
<title>Carrusel automatico en HTML y CSS</title>
<meta charset="UTF-8">
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="carrusel-contenido">
<div id="carrusel-caja">
<div class="carrusel-elemento">
<img class="imagenes" src="imagenes/imagen-1.jpg" >
</div>
<div class="carrusel-elemento">
<img class="imagenes" src="imagenes/imagen-2.jpg">
</div>
<div class="carrusel-elemento">
<img class="imagenes" src="imagenes/imagen-3.jpg">
</div>
</div>
</div>
<h1> MiguelTroyano.com </h1>
</body>
</html>En el código anterior podemos destacar las siguientes líneas:
- Línea 5: vinculo entre el fichero .html y el archivo .css
- Líneas 8 y 20: inicio y cierre de la capa div que contendrá el carrusel.
- Líneas 9 y 19: inicio y cierre de la capa div que contendrá todas las imágenes.
- Líneas 10 y 12: inicio y cierre de la capa div que contendrá la primera imagen.
- Línea 11: declaración de la primera imagen.
- Líneas 13 y 15: inicio y cierre de la capa div que contendrá la segunda imagen.
- Línea 12: declaración de la segunda imagen.
- Líneas 16 y 18: inicio y cierre de la capa div que contendrá la tercera imagen.
- Línea 17: declaración de la tercera imagen.
Código CSS
Crea un fichero llamado style.css que contenga este código:
h1 {
text-align: center;
}
#carrusel-caja {
-moz-animation: automatizacion 15s infinite linear;
-o-animation: automatizacion 15s infinite linear;
-webkit-animation: automatizacion 15s infinite linear;
animation: automatizacion 15s infinite linear;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
transition: all 0.75s ease;
height: 500px;
width: 300%;
}
#carrusel-contenido {
margin: 0 auto;
overflow: hidden;
text-align: left;
}
.imagenes{
height: 500px;
width: 100%;
}
.carrusel-elemento {
float: left;
width: 33.333%;
}
@-moz-keyframes automatizacion {
0% {
margin-left: 0;
}
30% {
margin-left: 0;
}
35% {
margin-left: -100%;
}
65% {
margin-left: -100%;
}
70% {
margin-left: -200%;
}
95% {
margin-left: -200%;
}
100% {
margin-left: 0;
}
}
@-webkit-keyframes automatizacion {
0% {
margin-left: 0;
}
30% {
margin-left: 0;
}
35% {
margin-left: -100%;
}
65% {
margin-left: -100%;
}
70% {
margin-left: -200%;
}
95% {
margin-left: -200%;
}
100% {
margin-left: 0;
}
}
@keyframes automatizacion {
0% {
margin-left: 0;
}
30% {
margin-left: 0;
}
35% {
margin-left: -100%;
}
65% {
margin-left: -100%;
}
70% {
margin-left: -200%;
}
95% {
margin-left: -200%;
}
100% {
margin-left: 0;
}
}Del código anterior podría dedicar infinidad de artículos explicando su funcionamiento, pero para ser prácticos veremos solo algunas líneas que puedes cambiar para adaptarlo a tus imagenes:
- Línea 17: alto de la capa div que contendrá todas las imágenes
- Línea 28: alto de las imágenes que vas a insertar.
- Línea 29: ancho de las imágenes que vas a insertar.
Como incluir más imágenes
Si quieres incluir más imágenes tenemos que modificar tanto el fichero html como la hoja de estilos. Este ejemplo trata de cómo incluir una cuarta imagen al código anterior.
Código HTML
Modifica el fichero .html e incluye las siguientes lineas después de la línea 18.
<div class="carrusel-elemento"> <img class="imagenes" src="imagenes/imagen-4.jpg"> </div>
Código CSS
Esta parte puede resulta mucho más compleja, pero debemos adaptar el código CSS para incluir la nueva imagen:
- Modifica la línea 18 (línea del archivo css completo), pasara de tener un ancho de 300% a 400% (100% x 4 imágenes = 400%)
- Modifica la línea 34, pasara de tener un ancho de 33,33% a 25% (100% / 4 imágenes = 25%)
- Sustituye de la línea 37 hasta el final por este código:
@-moz-keyframes automatizacion {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
45% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
70% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
99% {
margin-left: -300%;
}
100% {
margin-left: 0;
}
}
@-webkit-keyframes automatizacion {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
45% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
70% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
99% {
margin-left: -300%;
}
100% {
margin-left: 0;
}
}
@keyframes automatizacion {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
45% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
70% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
99% {
margin-left: -300%;
}
100% {
margin-left: 0;
}
}Seguramente te preguntaras que hacen estas líneas y voy a explicarlo de una forma muy sencilla sin entrar en tecnicismos. Se va dividir en cinco grupos, 1 por cada diapositiva y uno final para que vuelva al principio.
- Del 0% al 20% le estamos indicando que debe permanecer en la primera imagen, sin moverse.
- Del 25% al 45% debe permanecer en la posición -100%, es decir, la segunda imagen.
- Del 50% al 70% debe permanecer en la posición -200%, es decir, la tercera imagen.
- Del 75% al 99% debe permanecer en la posición -300%, es decir, la cuarta imagen .
- En el 100% debe volver a la primera imagen, es decir, a la posición 0%.
Si no te gusta que vuelve desde la imagen 4 a la 1 tan deprisa cambia los porcentajes.
Buen día, gracias por el aporte.
Si quisiera que en lugar de pegarse a la izquierda las imágenes quedaran centradas en la pantalla, al ser más chicas, qué parámetro debería modificar?
Entiendo que has modificado el fichero css, ya que este código siempre están las imágenes ampliadas al 100% del ancho de la ventana. Si has modificado la clase imagenes la propiedad width de 100% a un ancho fijo, para que las imágenes se muestren en el centro debes cambiar la clase #carrusel-contenido y establecer la propiedad text-align a center
Gracias, ya había tratado de cambiar ese parámetro pero en la página donde estoy metiendo el html me lo sigue mostrando a la izquierda, sólo si corro el html de manera local lo veo ya en el centro como necesito… Seguiré investigando!