Carousel

A scroll-snap track with items and directional controls. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• carousel-root, carousel, carousel--vertical, carousel-item, carousel-control, carousel-control--start, carousel-control--end, carousel-control--top
• carousel-control--bottom

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<section class="carousel-root" aria-label="Featured projects">
  <div class="carousel" tabindex="0" aria-label="Project slides">
    <article class="carousel-item">Project one</article>
    <article class="carousel-item">Project two</article>
  </div>
  <button class="carousel-control carousel-control--start" type="button" aria-label="Previous project">‹</button>
  <button class="carousel-control carousel-control--end" type="button" aria-label="Next project">›</button>
</section>

Variants and composition

carousel–vertical changes the scroll axis. Start/end and top/bottom control modifiers place buttons on the corresponding logical edge; scrolling behavior remains application code.

Behavior and accessibility

Name the scrollable track, label each item, and provide controls that actually scroll it. Scroll-snap styling does not implement navigation or focus management.

Reference

See the interactive Storybook specimen ↗. Continue to Chat or return to the Official preset overview.