Carousel

Checkbox
Combobox

Carousel

Release

Ship faster with native patterns

Carousel uses CSS scroll snap and a small controller instead of a heavy drag dependency.

Docs

Keep examples close to real HTML

Each slide can contain arbitrary semantic content, not only cards or images.

Style packs

Works across every bundle

Radius, borders, muted surfaces, and control styling all come from the active style pack.

Usage

5h3ll-ui Carousel intentionally maps the upstream shadcn/ui idea onto native browser scrolling instead of porting Embla internals. The result is a smaller public API built from scroll snapping, semantic content, and a lightweight controller script.

Include CSS

@import "tailwindcss";
@import "5h3ll-ui/vega.css";

Or import the base CSS plus Carousel and optional Scrollbar component CSS.

@import "tailwindcss";
@import "5h3ll-ui/base.css";
@import "5h3ll-ui/components/carousel.css";
@import "5h3ll-ui/components/scrollbar.css";
@import "5h3ll-ui/styles/vega.css";

Include JavaScript

<script src="/assets/js/all.min.js" defer></script>

Or copy the runtime and Carousel script separately.

<script src="/assets/js/5h3ll-ui.min.js" defer></script>
<script src="/assets/js/carousel.min.js" defer></script>

Add your carousel HTML

<section class="carousel" aria-label="Featured updates">
  <div data-carousel-viewport tabindex="0">
    <div data-carousel-track>
      <article data-carousel-item>...</article>
      <article data-carousel-item>...</article>
      <article data-carousel-item>...</article>
    </div>
  </div>
  <div data-carousel-controls>
    <div data-carousel-nav>
      <button type="button" data-carousel-prev>Previous</button>
      <button type="button" data-carousel-next>Next</button>
    </div>
    <div data-carousel-dots>
      <button type="button" data-carousel-dot></button>
      <button type="button" data-carousel-dot></button>
      <button type="button" data-carousel-dot></button>
    </div>
  </div>
</section>

HTML structure

<section class=“carousel” aria-label=”…”>
Carousel root. Use aria-label or aria-labelledby to give the region an accessible name.
data-orientation=“horizontal|vertical” Optional
Switches the track to vertical scrolling. Horizontal is the default.
<div data-carousel-viewport tabindex=“0”>
Scrollable viewport. The script listens here for scroll state and keyboard navigation.
<div data-carousel-track>
Track wrapper holding the slides in order.
<article data-carousel-item>
One slide. Use any semantic element that fits the content.
data-carousel-prev, data-carousel-next Optional
Previous and next controls.
data-carousel-dots and data-carousel-dot Optional
Direct slide navigation. Provide one dot per slide.

JavaScript API

APITypeDescription
carousel.refresh()MethodRescans slides and controls after child changes.
carousel.scrollTo(index)MethodScrolls to the slide at the provided zero-based index.

Examples

Image cards

Dashboard overviewSummary cards, quick actions, and recent activity.
Settings workspaceField groups composed from existing 5h3ll-ui primitives.
Team activityA scrollable layout that still keeps each frame isolated.

Vertical

Create workspace

Set your workspace name, domain, and visual theme.

Invite your team

Add teammates and choose which notifications they receive.

Ship the first page

Start from blocks and adjust the markup to fit your app.

Notes

Intentional divergence from upstream

Upstream shadcn/ui Carousel is built on Embla. 5h3ll-ui uses native scrolling and CSS scroll snap instead, so Embla-specific plugins and APIs are intentionally not part of this component.