Tiempo de lectura:4 Minutos, 48 Segundos

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:

  1. Modifica la línea 19, pasara de tener un ancho de 300% a 400% (100% x 4 imágenes = 400%)
  2. Modifica la línea 35, pasara de tener un ancho de 33,33% a 25% (100% / 4 imágenes = 25%)
  3. Sustituye de la línea 38 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.

Te puede interesar…

6 comentarios en “Crear un carrusel automático en HTML y CSS sin Javascript

    1. 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.

      1. 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

        1. ¡Hola! he actualizado la entrada con los cambios necesarios tanto en el HTML como en el CSS, espero que te sea de utilidad.

          ¡Gracias!

  1. 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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y los términos de servicio de Google.

Perfiles en Redes Sociales