Marcio Cunha
Volver al Blog
Frontend

Cómo crear un carrusel de imágenes con HTML, CSS y JavaScript

Crear un carrusel de imágenes adaptable a cualquier pantalla es más sencillo de lo que parece combinando tres tecnologías básicas. Este recorrido paso a paso muestra cómo construir un slider funcional desde cero usando código limpio.

Marcio Cunha•6 min
También disponible en:EnglishPortuguês
Resumen
  • La estructura HTML organiza las imágenes en una pista contenedora acompañada de botones de navegación.
  • El diseño visual mediante CSS oculta los elementos sobrantes fuera del área visible y alinea las imágenes una al lado de la otra.
  • Las reglas de transición en CSS aseguran que el movimiento entre una foto y otra ocurra de forma suave y fluida.
  • El código en JavaScript calcula el desplazamiento horizontal exacto multiplicando el índice de la imagen por el ancho total del contenedor.
  • Las futuras mejoras del componente pueden incluir puntos indicadores de posición, reproducción automática y gestos táctiles de deslizamiento.

¿Qué es un carrusel?

Un carrusel o slider es un componente visual que muestra varias imágenes ocupando el mismo espacio en la pantalla, permitiendo navegar entre ellas mediante botones de anterior y siguiente.

Paso 1: Estructura HTML

\"Imagen
\"Imagen
\"Imagen

Paso 2: Estilos CSS

.carousel-container { position: relative; overflow: hidden; max-width: 600px; }.carousel-track { display: flex; transition: transform .4s ease; }.carousel-slide { min-width: 100%; }.carousel-slide img { width: 100%; display: block; }.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); }.prev { left: 10px; }.next { right: 10px; }

Paso 3: JavaScript

const track = document.querySelector('.carousel-track');const slides = document.querySelectorAll('.carousel-slide');let index = 0;function update() { track.style.transform = 'translateX(' + (-index * 100) + '%)';}document.querySelector('.next').addEventListener('click', () => { index = (index + 1) % slides.length; update();});document.querySelector('.prev').addEventListener('click', () => { index = (index - 1 + slides.length) % slides.length; update();});

Siguientes pasos

  • Indicadores (puntos)
  • Autoplay
  • Soporte swipe