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

Nur Chrome 135; Safari und Firefox noch nicht (caniuse: keine Unterstützung bis Safari 27 / Firefox 158). Nicht Baseline.

Chrome 135Edge 135Safari noFirefox no

Reine CSS-Karussells: ein Scroll-Snap-Container bekommt Zurück-/Weiter-Buttons und eine Punkt-/Tab-Navigation als Pseudo-Elemente, mit `:target-current` für die aktive Folie. Keine Karussell-Bibliothek.

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: Andere Browser zeigen eine einfache horizontale Scroll-Snap-Liste, die mit Touch und Tastatur weiterhin funktioniert.

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

Prompt

Baue das Karussell als Scroll-Snap-Container und ergänze die Navigation mit Pseudo-Elementen: `scroll-marker-group: after` plus `li::scroll-marker` (style `:target-current` für den aktiven Punkt) und `::scroll-button(left|right)`, per Anchor Positioning am Container verankert. Chromium-only Stand 2026-09; die Scroll-Snap-Liste selbst ist der Fallback. Ergänze keine JS-Karussell-Bibliothek.