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

Chrome 135 only; Safari and Firefox not yet (caniuse: no support through Safari 27 / Firefox 158). Not Baseline.

Chrome 135Edge 135Safari noFirefox no

Pure-CSS carousels: a scroll-snap container grows previous/next buttons and a dot/tab navigation as pseudo-elements, with `:target-current` marking the active slide. No carousel library.

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: Other browsers show a plain horizontal scroll-snap list, which still works with touch and keyboard.

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

Prompt

Build the carousel as a scroll-snap container and add navigation with pseudo-elements: `scroll-marker-group: after` plus `li::scroll-marker` (style `:target-current` for the active dot) and `::scroll-button(left|right)` anchored to the container with anchor positioning. Chromium-only in 2026-09; the scroll-snap list itself is the fallback. Do not add a JS carousel library.