CSS carousels: ::scroll-button(), ::scroll-marker(), ::scroll-marker-group

Solo Chrome 135; Safari y Firefox todavía no (caniuse: sin soporte hasta Safari 27 / Firefox 158). No es Baseline.

Chrome 135Edge 135Safari noFirefox no

Carruseles en CSS puro: un contenedor con scroll-snap genera botones de anterior/siguiente y una navegación de puntos o pestañas como pseudoelementos, con `:target-current` marcando la diapositiva activa. Sin librería de carrusel.

Slide 1
Slide 2
Slide 3

CSS

.fx-054{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;list-style:none;padding:0;margin:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;anchor-name:--fx-054;
  scroll-marker-group:after;
}
.fx-054 li{scroll-snap-align:center;height:140px;display:grid;place-items:center;background:#e0e7ff;border-radius:12px;font:600 18px system-ui}
.fx-054::scroll-marker-group{display:flex;gap:8px;justify-content:center;margin-top:12px}
.fx-054 li::scroll-marker{content:"";width:10px;height:10px;border-radius:50%;background:#c7d2fe}
.fx-054 li::scroll-marker:target-current{background:#2563eb}
.fx-054::scroll-button(*){position-anchor:--fx-054;position:absolute;width:36px;height:36px;border:0;border-radius:50%;background:#111;color:#fff;font:18px system-ui;cursor:pointer}
.fx-054::scroll-button(left){content:"<";position-area:center left;margin-left:8px}
.fx-054::scroll-button(right){content:">";position-area:center right;margin-right:8px}
.fx-054::scroll-button(*):disabled{opacity:.3}

HTML

<ul class="fx-054"><li>Slide 1</li><li>Slide 2</li><li>Slide 3</li></ul>

Fallback: Los demás navegadores muestran una lista horizontal con scroll-snap normal, que sigue funcionando con táctil y teclado.

Fuente: caniuse.com/mdn-css_selectors_scroll-marker and https://developer.chrome.com/blog/carousels-with-css

Prompt

Construye el carrusel como un contenedor con scroll-snap y añade la navegación con pseudoelementos: `scroll-marker-group: after` más `li::scroll-marker` (estiliza `:target-current` para el punto activo) y `::scroll-button(left|right)` anclados al contenedor con anchor positioning. Solo Chromium en 2026-09; la propia lista con scroll-snap es el respaldo. No añadas una librería de carrusel en JS.