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.
Hola!
Me ha sido de gran ayuda, pero tengo la duda de si puedo añadir mas imagenes al carrusel.
Gracias
Hola! Puedes agregar más imágenes copiando las líneas 15, 16 y 17 después de la línea 17 del fichero .html. Recuerda cambiar el nombre de la imagen.
Gracias por tu visita.
Buenas Miguel:
Tu código me a ayudado mucho, gracias por compartirlo.
Sin embargo, algo sucede que al agregar una imagen de esta forma (copiando las líneas 15, 16 y 17 y pegándolas debajo de la 17, modificando el nombre de la imagen) la imagen nueva se muestra debajo de la primera, de forma que siguen siendo 3 las diapositivas (quedando la primera con el doble de alto, mostrando la imagen 1 y la 4).
¿Será necesario, además, modificar algo en el .css para que esto no ocurra?.
Un saludo
¡Hola! he actualizado la entrada con los cambios necesarios tanto en el HTML como en el CSS, espero que te sea de utilidad.
¡Gracias!
Hola Miguel:
Te lo agradezco muchísimo.
Un saludo
🙂
puedo agregar mas de 30 fotos al carrusel??
No sabes como me ayudaste, me pregunto si esta herramienta puede soportar cien imagenes, de hecho estoy trabajando en ello ya que he estado muchas horas buscando solucion a esta herramienta ya que use un codigo keyframe de otra web, pero no tenia nada de informacion de como trabajar con esta herramienta, pero con tu ayuda ya lo estoy condiguiendo. Saludos, gracias por el aporte. Agradecer no cuesta nada!
hola como puedo hacer para reducir el tamaño de las imagenes en el carrusel
¡Hola! Modifica el fichero style.css, busca la clase imágenes y modifica el tamaño del alto (propiedad height) y el ancho (propiedad width)
Me ha servido de gran ayuda. Sencillo, fácil de entender, y además funciona perfectamente. Todos los que he vista hasta el momento, son muy bonitos, prometen mucho, pero a la hora de la verdad no funcionan.
Gracias
POSDATA:
Si me das permiso te puedo mencionar, y poner un enlace, en mi pagina web. Esta en los comienzos, pero si quieres te menciono.
Gracias por tu visita y por tu comentario. Me alegro que te sirviese. Puedes mencionar la web sin problema. ¡Un saludo!
Busco codigo, que me permita mostrar dos paginas, en un intervalo de tiempo, apenas estoy empezando a programar, gracias de antemano
¡Hola! No se a que se refiere, necesitaria más explicación. Gracias por su visita.