@weburz/carousel playground

YouTubeCarousel — captions: explicit on slide 1, auto-fetched on 2 & 3

captions="none" — media only, no text anywhere

captions="active" — one text block that follows the active slide

Each video carries its own title and description; the arrows swap both the media and the text. Pairs well with layout="aside".

YouTubeCarousel — shorts in the aside layout

Custom #heading + arrow icon slots — bring your own markup

The heading slot replaces the built-in title/description (and wins over captions="active"); prevIcon/nextIcon swap the default chevrons. Works on the platform carousels too, not just BaseCarousel.

YouTubeCarousel — player-api mode (autoplay on scroll, pause on leave)

Scroll this section into view to trigger autoplay. Swipe to a different slide to pause the previous video.

Framed media — border, radius & shadow via CSS vars

InstagramCarousel

TikTokCarousel — aside layout

Theme inheritance — design-system tokens

The theme class on the wrapper defines the tokens; the carousel inherits them at render time. No JS theme watcher needed — click to cycle.

BaseCarousel — arrows flanking the dots, title + description props

arrow-position="sides" — arrows beside the stage

layout="aside" — heading + nav on the left, carousel on the right

Resize below 768px wide and it collapses back to the stacked layout.

layout="aside" + aside-position="right" — carousel left, heading right

Two slides per view, looped

Dots only / arrows only