01 · Carousel nativo

Carousel nativo

Carousel con scroll markers y scroll buttons

scroll-snap hoy · ::scroll-button/::scroll-marker experimental (Chrome 135+ flag)

← Índice

◐

overflow + snap

overflow-x: auto + scroll-snap-type: x mandatory y scroll-snap-align en cada card.

⬢

::scroll-button

::scroll-button(left/right) crea flechas nativas; el navegador las deshabilita solo (:disabled).

●

::scroll-marker

::scroll-marker-group + ::scroll-marker y :target-current para los dots, 100% estilables.

◧

Sin JS

Un contenedor scrollable + pseudo-elementos = carousel accesible, con teclado y sin librerías.

⤢

Snap mandatory

Con scroll-snap-type: x mandatory el navegador fuerza el snap a la card más cercana al soltar.

✦

Keyboard nativo

Tab lleva al carrusel, flechas izq/der mueven entre cards. Todo gestionado por el navegador, sin JS.

◿

scroll-padding

scroll-padding-left ajusta el offset del snap para que la primera card no quede pegada al borde.

◆

Progressive enhancement

Si ::scroll-button no está soportado, el scroll sigue funcionando. Solo se pierden las flechas.

Arrastrá o usá las flechas/dots. En navegadores sin soporte ves el scroll horizontal igualmente usable.

css

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-marker-group: after;   /* dots nativos */
}

.carousel .card {
  scroll-snap-align: start;     /* cada card hace snap */
  width: 280px;
}

/* flechas nativas — el navegador las deshabilita solo */
.carousel::scroll-button(left)  { content: "‹"; }
.carousel::scroll-button(right) { content: "›"; }

/* dots nativos — :target-current marca el activo */
.carousel::scroll-marker { width: 10px; height: 10px; }
.carousel::scroll-marker:target-current {
  background: var(--amber-500);
  transform: scale(1.3);
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.