¿Quieres un slider en HTML5 y CSS3 que cargue rápido y no arrastre librerías pesadas? Aquí tienes uno moderno, hecho con scroll-snap, sin JavaScript y listo para copiar y pegar.
He reescrito este tutorial de arriba abajo. La versión antigua montaba un slideshow a pantalla completa con @keyframes, una técnica de 2012 que ya no encaja con la web de hoy. El nuevo método es más corto, más ligero y accesible de serie.
Vas a montar un carrusel que se desliza con el dedo en móvil y con la rueda en escritorio, con puntos de navegación, una opción de autoplay con moderación y respeto por quien prefiere menos animación. Todo con HTML y CSS.
Por qué un carrusel CSS sin JavaScript
Durante años, un carrusel significaba cargar jQuery más un plugin de 30 KB. Hoy no hace falta. La propiedad scroll-snap-type del CSS moderno hace que un contenedor con scroll se detenga limpio en cada diapositiva, como un carrusel de toda la vida.
Las ventajas de un slider css sin javascript son concretas: menos peso, mejor rendimiento en móvil y cero dependencias que actualizar. El navegador ya trae el comportamiento nativo, así que el scroll es fluido y funciona con el dedo, el trackpad y el teclado.
El soporte es sólido en todos los navegadores actuales. Puedes consultar la referencia oficial de la técnica en MDN Web Docs sobre CSS scroll snap.
Slider en HTML5 y CSS3 paso a paso con scroll-snap
Empezamos por el esqueleto. El HTML es una lista de diapositivas dentro de un contenedor. Nada de div anidados de más: cuanto más simple, mejor.
<div class="carrusel" role="region" aria-label="Galería de proyectos" tabindex="0">
<div class="carrusel__slide">
<img src="foto-1.jpg" alt="Descripción de la primera imagen">
</div>
<div class="carrusel__slide">
<img src="foto-2.jpg" alt="Descripción de la segunda imagen">
</div>
<div class="carrusel__slide">
<img src="foto-3.jpg" alt="Descripción de la tercera imagen">
</div>
</div>Ahora el CSS, que es donde ocurre la magia. Tres propiedades hacen todo el trabajo: scroll-snap-type en el contenedor, scroll-snap-align en cada diapositiva y scroll-behavior: smooth para que el salto sea suave.
.carrusel {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
.carrusel__slide {
flex: 0 0 100%;
scroll-snap-align: center;
}
.carrusel__slide img {
display: block;
width: 100%;
height: 380px;
object-fit: cover;
border-radius: 12px;
}
/* Foco visible cuando navegas con teclado */
.carrusel:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 4px;
}Con esto ya tienes un carrusel css funcional. Cada tarjeta ocupa el 100% del ancho gracias a flex: 0 0 100%, y el scroll se detiene centrado en cada una. Cambia ese valor a 0 0 60% si quieres que asome la siguiente diapositiva.
Variante con puntos de navegación
Los puntos de navegación se resuelven con enlaces internos, también sin JavaScript. Le das un id a cada diapositiva y creas anclas que saltan a ellas. Al usar scroll-behavior: smooth, el desplazamiento es suave.
<div class="carrusel" role="region" aria-label="Galería" tabindex="0">
<div class="carrusel__slide" id="slide-1"><img src="foto-1.jpg" alt="..."></div>
<div class="carrusel__slide" id="slide-2"><img src="foto-2.jpg" alt="..."></div>
<div class="carrusel__slide" id="slide-3"><img src="foto-3.jpg" alt="..."></div>
</div>
<nav class="carrusel__nav" aria-label="Ir a la diapositiva">
<a href="#slide-1"><span class="sr-only">Diapositiva 1</span></a>
<a href="#slide-2"><span class="sr-only">Diapositiva 2</span></a>
<a href="#slide-3"><span class="sr-only">Diapositiva 3</span></a>
</nav>.carrusel__nav {
display: flex;
justify-content: center;
gap: 0.6rem;
margin-top: 1rem;
}
.carrusel__nav a {
width: 14px;
height: 14px;
border-radius: 50%;
background: #cbd5e1;
transition: background 0.2s ease;
}
.carrusel__nav a:hover,
.carrusel__nav a:focus-visible {
background: #2563eb;
}
/* Oculta el texto pero lo deja para lectores de pantalla */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}Cada punto lleva un texto oculto con la clase sr-only para que un lector de pantalla anuncie a qué diapositiva lleva. Es un detalle pequeño que marca la diferencia en accesibilidad.
Autoplay con moderación y prefers-reduced-motion
El autoplay divide opiniones, y con razón: molesta si roba el control al lector. Si lo usas, hazlo con cabeza. Pausa al pasar el cursor o al enfocar, y desactívalo para quien pide menos movimiento.
Para animarlo sin JavaScript uso una pista con @keyframes que traslada las diapositivas. Es la única parte donde recupero @keyframes, pero de forma controlada y opcional.
.autoplay {
overflow: hidden;
}
.autoplay .carrusel__track {
display: flex;
animation: desliza 12s infinite;
}
@keyframes desliza {
0%, 28% { transform: translateX(0); }
33%, 61% { transform: translateX(-100%); }
66%, 94% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}
/* Pausa al interactuar */
.autoplay:hover .carrusel__track,
.autoplay:focus-within .carrusel__track {
animation-play-state: paused;
}
/* Respeta la preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
.autoplay .carrusel__track {
animation: none;
}
}La consulta prefers-reduced-motion es clave. Muchas personas configuran su sistema para reducir animaciones por vértigo o mareo. Con ese bloque, tu slideshow html css se queda quieto y solo muestra la primera diapositiva.
Mi consejo: si el carrusel muestra información importante, olvídate del autoplay. Deja que el lector avance a su ritmo.
Accesibilidad del slider
Un carrusel accesible no es más trabajo, solo requiere atención a cuatro detalles. Ya los has ido colocando en el código anterior.
- role=»region» y aria-label: identifican el carrusel como una zona con nombre para lectores de pantalla.
- tabindex=»0″: hace que el contenedor reciba el foco, así se puede desplazar con las flechas del teclado.
- :focus-visible: muestra un contorno claro cuando navegas sin ratón. Nunca lo quites.
- alt descriptivo en cada imagen: sin él, la galería no significa nada para quien no ve.
Con scroll-snap-type el foco del teclado se comporta bien porque el scroll es nativo. No estás reinventando la interacción, solo la afinas. Por eso este método gana a los carruseles hechos a mano con JavaScript, donde el foco suele romperse.
Antes de subir tus imágenes, comprime y sirve el formato correcto. Te lo cuento en mi guía de buenas prácticas con imágenes web, que se nota mucho en la velocidad del carrusel.
Cuándo usar una librería JavaScript
Seré honesta: el CSS puro no lo cubre todo. Hay casos donde una librería como Swiper o Embla te ahorra horas. Recurre a JavaScript cuando necesites alguna de estas cosas.
- Bucle infinito real, sin salto brusco al volver al inicio.
- Autoplay con temporizador preciso, pausa inteligente y transiciones tipo fade.
- Sincronizar dos carruseles (miniaturas más imagen grande).
- Lazy loading avanzado o carga de decenas de diapositivas pesadas.
Para el 80% de los casos (una galería, un testimonial, unas capturas de producto) el slider css sin javascript que has montado aquí sobra. Empieza por lo simple y sube de nivel solo si el proyecto lo pide.
Tip: Si prefieres partir de una maqueta terminada, en Envato Elements hay plantillas HTML con galerías y sliders listos para adaptar. Puedes echar un vistazo a las plantillas web de Envato.
Más recursos relacionados
Si te ha gustado montar interfaz solo con CSS, sigue por aquí. Estos tutoriales juegan en la misma liga.
- Menús animados con CSS3: navegación con transiciones limpias, también sin JavaScript.
- Crear banners animados con CSS3: la misma idea de
@keyframesaplicada a publicidad ligera. - Microinteracciones web con ejemplos de código: pequeños detalles que suben la percepción de calidad.
Preguntas frecuentes
¿Se puede hacer un slider en HTML5 y CSS3 sin JavaScript?
Sí. Con scroll-snap-type y scroll-snap-align tienes un carrusel nativo que se detiene en cada diapositiva. Los puntos de navegación se resuelven con anclas internas. No necesitas ni una línea de JavaScript.
¿Qué navegadores soportan scroll-snap?
Todos los navegadores modernos: Chrome, Firefox, Safari y Edge en sus versiones actuales. Es una propiedad estable desde hace años, así que puedes usarla en producción sin preocuparte.
¿Cómo hago que el carrusel funcione con el teclado?
Añade tabindex="0" al contenedor con scroll. Así recibe el foco y el usuario puede desplazarlo con las flechas. Combínalo con :focus-visible para que el contorno sea claro.
¿El autoplay es malo para el SEO o la accesibilidad?
El autoplay no penaliza el SEO por sí mismo, pero molesta a muchos usuarios y perjudica la accesibilidad. Si lo usas, pausa al interactuar y desactívalo con prefers-reduced-motion, como en el ejemplo.
¿Cuándo conviene usar una librería como Swiper?
Cuando necesites bucle infinito real, transiciones fade, miniaturas sincronizadas o lazy loading avanzado. Para una galería normal, el carrusel CSS es más ligero y suficiente.
Copia el código, adáptalo a tus imágenes y dime en los comentarios para qué proyecto lo vas a usar. Que lo disfrutes.
