Scroll Marker Carousel
A carousel with zero JavaScript — real prev/next arrows and active-slide dots, generated entirely by CSS Overflow Module Level 5's ::scroll-button() and ::scroll-marker pseudo-elements (Working Draft spec, Chrome/Edge 135+ only — no Firefox/Safari support yet). The base carousel is just a native scroll-snap row, which already works in every browser via touch/trackpad/scrollbar; the arrows and dots are a progressive-enhancement layer that only renders where the browser understands it, so nothing breaks on unsupported engines. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll or drag inside the box; arrows/dots need a Chromium 135+ engine to render.)
<div class="csc-track" tabindex="0" aria-label="Carousel">
<div class="csc-slide">01</div>
<div class="csc-slide">02</div>
<div class="csc-slide">03</div>
<div class="csc-slide">04</div>
</div>How it works
Scroll Marker Carousel is a hand-built scroll component in plain HTML and CSS — no React, no Tailwind, no framework at all. Paste it into any site as-is and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components