Carruseles y sliders solo con CSS (scroll-snap, scroll-behavior)

Crea carruseles, sliders y galerías interactivas solo con CSS moderno, sin una línea de JavaScript.

Carruseles y sliders solo con CSS

Hoy puedes crear sliders, galerías y carruseles completamente funcionales solo con CSS, usando scroll-snap y scroll-behavior. Sin dependencias, sin JS, y con soporte nativo en todos los navegadores modernos.

Ejemplo básico de scroll-snap

.carrusel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.carrusel > * {
  flex: 0 0 80vw;
  scroll-snap-align: start;
  margin-right: 2rem;
}

Ventajas

Accesible y nativo
Soporte táctil y mouse
Sin dependencias externas

Limitaciones

No hay callbacks JS
Navegación limitada a controles nativos o anchors

Explora el código y experimenta con tus propios carruseles solo CSS.