Tiempo de lectura:4 Minutos, 59 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:

En el código anterior podemos destacar las siguientes líneas:

  • Línea 4: vinculo entre el fichero .html y el archivo .css
  • Líneas 7 y 19: inicio y cierre de la capa div que contendrá el carrusel.
  • Líneas 8 y 18: inicio y cierre de la capa div que contendrá todas las imágenes.
  • Líneas 9 y 11: inicio y cierre de la capa div que contendrá la primera imagen.
  • Línea 10: declaración de la primera imagen.
  • Líneas 12 y 14: inicio y cierre de la capa div que contendrá la segunda imagen.
  • Línea 11: declaración de la segunda imagen.
  • Líneas 15 y 17: inicio y cierre de la capa div que contendrá la tercera imagen.
  • Línea 16: declaración de la tercera imagen.

Código CSS

Crea un fichero llamado style.css que contenga este código:

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 16: alto de la capa div que contendrá todas las imágenes
  • Línea 27: alto de las imágenes que vas a insertar.
  • Línea 28: 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 17.

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 18, pasara de tener un ancho de 300% a 400% (100% x 4 imágenes = 400%)
  2. Modifica la línea 34, pasara de tener un ancho de 33,33% a 25% (100% / 4 imágenes = 25%)
  3. Sustituye de la línea 37 hasta el final por este código:

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…

5 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!

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