carousel

Scroll-snap carousel with optional dots.

status: partial js: consumer support: baseline

Preview

…

Markup

<div class="carousel"><div class="carousel-viewport"><div class="carousel-track"><div class="carousel-item">…</div></div></div><div class="carousel-controls"><button class="carousel-btn">‹</button><div class="carousel-dots"><button class="carousel-dot"></button></div><button class="carousel-btn">›</button></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/carousel.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add carousel

Accessibility

Scroll-snap works with no JS; arrows/dots need JS; viewport is keyboard-focusable

Classes

.carousel .carousel-viewport .carousel-track .carousel-item .carousel-controls .carousel-btn .carousel-dots .carousel-dot

Dependencies

base/tokens