Carousel
A row that scrolls sideways and snaps. No previous/next buttons, no autoplay, no script - the browser owns the scrolling, which means it also owns the trackpad, the touch fling, the scrollbar and the arrow keys.
Reference
sk-carousel
Scripted carousels break in the same few ways every time: they autoplay past what someone was reading, they hide offscreen slides from the keyboard, and their arrows desynchronise from the real scroll position. A scroll container with snap points has none of those failure modes. Offscreen items stay in the DOM, in the tab order and in the accessibility tree, and tabbing to one scrolls it into view - the opposite of the usual carousel, where slide three is display: none and its links cannot be reached at all.
<div class="sk-carousel" tabindex="0" role="group" aria-label="Screenshots">
<div class="sk-carousel-item">…</div>
<div class="sk-carousel-item">…</div>
</div>| Attribute | Type | Default | Notes |
|---|---|---|---|
tabindex | "0" | - | Not decoration: in some browsers a scroll container that cannot take focus cannot be scrolled from the keyboard at all. It takes a role and a name for the same reason - a focusable element announced as nothing is a dead stop in the tab order. |
data-variant | "slides" | - | One full-width item at a time, snapped to centre rather than to the start - a single slide has no neighbour for the eye to line it up against. |
data-size | "sm" | "lg" | 16rem | The item width. --sk-carousel-item-size sets it directly for anything in between. |
scroll-snap-align | start | center | start | On the item. Set by the variant; listed because it is the one property worth knowing is there. |
Examples
Shelf
Cards at their natural width. Scroll it, or tab into it and use the arrow keys.
Kiwi Kart
Eight tracks, four islands, one very determined bird.
Fern & Forge
Build a workshop, fill it with apprentices, never finish anything.
Tui Trader
A trading sim about being slightly too honest.
Moa Mountain
Climb it. That is the whole game.
Pounamu
A puzzle game carved out of one rock.
Show markup
<div class="sk-carousel" tabindex="0" role="group" aria-label="Games">
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Kiwi Kart
</h3>
<p class="sk-card-subtitle">
Eight tracks, four islands, one very determined bird.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Fern & Forge
</h3>
<p class="sk-card-subtitle">
Build a workshop, fill it with apprentices, never finish anything.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Tui Trader
</h3>
<p class="sk-card-subtitle">
A trading sim about being slightly too honest.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Moa Mountain
</h3>
<p class="sk-card-subtitle">
Climb it. That is the whole game.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Pounamu
</h3>
<p class="sk-card-subtitle">
A puzzle game carved out of one rock.
</p>
</div>
</div>
</div>
</div>
</div>Slides
One at a time, snapped to centre.
Kiwi Kart
Eight tracks, four islands, one very determined bird.
Fern & Forge
Build a workshop, fill it with apprentices, never finish anything.
Tui Trader
A trading sim about being slightly too honest.
Show markup
<div class="sk-carousel" data-variant="slides" tabindex="0" role="group" aria-label="Screenshots">
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Kiwi Kart
</h3>
<p class="sk-card-subtitle">
Eight tracks, four islands, one very determined bird.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Fern & Forge
</h3>
<p class="sk-card-subtitle">
Build a workshop, fill it with apprentices, never finish anything.
</p>
</div>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<div class="sk-flex sk-flex-col sk-gap-2">
<h3 class="sk-card-title">
Tui Trader
</h3>
<p class="sk-card-subtitle">
A trading sim about being slightly too honest.
</p>
</div>
</div>
</div>
</div>
</div>Small
For thumbnails, where the point is how many fit rather than how big each is.
Kiwi Kart
Fern & Forge
Tui Trader
Moa Mountain
Pounamu
Show markup
<div class="sk-carousel" data-size="sm" tabindex="0" role="group" aria-label="Thumbnails">
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<h3 class="sk-card-title">
Kiwi Kart
</h3>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<h3 class="sk-card-title">
Fern & Forge
</h3>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<h3 class="sk-card-title">
Tui Trader
</h3>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<h3 class="sk-card-title">
Moa Mountain
</h3>
</div>
</div>
</div>
<div class="sk-carousel-item">
<div class="sk-card">
<div class="sk-card-body">
<h3 class="sk-card-title">
Pounamu
</h3>
</div>
</div>
</div>
</div>