Carousel
A scroll-snap carousel with navigation buttons and dots, entirely
generated by the browser from CSS alone: no
<button> markup, no JavaScript. It's built on the
::scroll-button(), ::scroll-marker, and
scroll-marker-group CSS features described in the
MDN CSS carousels guide. These are very new and currently only ship in Chromium-based
browsers.
Default
A plain <ul class="carousel"> of
<li> slides. The previous/next buttons and the dots
below are generated automatically, they're not real elements in the
markup. The buttons disable themselves at the ends via
:disabled, and the active dot is tracked with
:target-current. Each <li> needs a
data-accname attribute: an empty
::scroll-marker content string gives it a blank
accessible name and breaks it, so its text comes from that attribute
and is hidden visually with text-indent.
-
Slide 1
-
Slide 2
-
Slide 3
-
Slide 4
-
Slide 5
<ul class="carousel">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>Images
Put an <img> directly inside each
<li> and it's sized to fill the slide
automatically.
<ul class="carousel">
<li data-accname="Slide 1"><img src="/slide-1.jpg" alt="" /></li>
<li data-accname="Slide 2"><img src="/slide-2.jpg" alt="" /></li>
<li data-accname="Slide 3"><img src="/slide-3.jpg" alt="" /></li>
</ul>Multiple visible slides
Set --visible inline to show more than one slide per
view, useful for showcasing a grid-like row of cards that still
scroll-snaps a page at a time.
-
Slide 1
-
Slide 2
-
Slide 3
-
Slide 4
-
Slide 5
<ul class="carousel" style="--visible: 3">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
</ul>Multiple carousels
The buttons and dots are positioned with CSS anchor positioning. Each carousel scopes its own anchor internally, so multiple carousels on the same page just work, no extra markup needed.
-
A 1
-
A 2
-
A 3
-
A 4
-
A 5
-
B 1
-
B 2
-
B 3
-
B 4
-
B 5
<ul class="carousel">
<li data-accname="A1">A1</li>
<li data-accname="A2">A2</li>
</ul>
<ul class="carousel">
<li data-accname="B1">B1</li>
<li data-accname="B2">B2</li>
</ul>