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.
Resumen
- El carrusel muestra una foto dentro de un marco que recorta el resto.
- El HTML guarda la pista, las diapositivas y los dos botones.
- El CSS hace que cada diapositiva ocupe el 100% del ancho visible.
- El JavaScript solo cambia el translateX de la pista.
- Los indicadores y el autoplay llegan cuando el clic manual ya funciona.
Qué tiene que ocultar la página
Un carrusel muestra una imagen a la vez en el mismo rectángulo. Las demás siguen en el HTML, una al lado de la otra, y una máscara recorta lo que pasa del ancho visible. El visitante no cambia de página: un clic solo desliza esa tira.
Hacen falta tres piezas. El HTML guarda la tira y los botones. El CSS define el ancho de cada diapositiva y la animación. El JavaScript cambia un número, el índice, y aplica ese desplazamiento.
Paso a paso
Monta en este orden. Si el botón no mueve nada, el fallo suele estar en el selector o en el ancho, no en la cuenta del índice.
- Crea un contenedor con overflow oculto y, dentro, una pista flexible con un bloque por foto.
- Haz que cada diapositiva ocupe el 100% del ancho del contenedor.
- Coloca los botones anterior y siguiente encima del contenedor.
- En JavaScript, empieza el índice en cero y escribe una función que aplique translateX negativo por 100% por el índice.
- En siguiente, suma 1 y vuelve a cero al pasar la última foto. En anterior, haz el camino inverso.
- Comprueba en el navegador: tres clics a la derecha deben volver a la primera foto.
function update() {
track.style.transform = 'translateX(' + (-index * 100) + '%)';
}Errores frecuentes
El deslizamiento se rompe cuando el ancho de la diapositiva no coincide con el marco, o cuando el script corre antes de que exista el HTML. Para complementar esta implementación en entornos de producción, consulte también nuestros análisis técnicos sobre Design System con CSS puro: Cómo crear tarjetas y barras laterales premium y Cómo crear y firmar commits usando claves GPG o claves SSH para garantizar autenticidad.
- Pon el script al final del body o espera DOMContentLoaded.
- No fijes la imagen en píxeles dentro de la diapositiva.
- Escribe alt en cada imagen.
- Indicadores y autoplay solo después de que el clic manual ya cambie la foto.
Conclusión
El carrusel es una tira que avanza en pasos del 100%. El HTML lista las fotos, el CSS recorta el exceso y el JavaScript solo actualiza el índice.
Con ese núcleo estable, los puntos y el avance automático son un contador sobre la misma función update.