The slide count lives in CSS media queries (1 below 48rem, 3 above), so the server-rendered HTML is already viewport-correct — no hydration width snap, unlike a slidesPerView prop driven by JS viewport detection. The var wins over the prop, which stays as the static fallback.
No YouTube player loads until you tap play — slides are plain thumbnails, so the page stays light and the carousel can be hand-swiped on touch screens (touches on a cross-origin iframe never reach the page). Swiping away destroys the player back to its thumbnail. Captions: explicit on slide 1, auto-fetched on 2 & 3.
Linked slide titles — omitted ones are fetched from YouTube oEmbed.
Each video carries its own title and description; the arrows swap both the media and the text. Pairs well with layout="aside".
Shia LaBeouf delivers the most motivational speech of all time.
9:16 facades (portrait thumbnails) with the nav cluster on the left.
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.
Showcase
Scroll this section into view to trigger autoplay. Swipe to a different slide to pause the previous video.
Each embed sits under a transparent layer so drags reach the carousel (Instagram has no keyless thumbnail, so no facade). Tap once to unlock the post for interaction; it locks again when the slide changes.
Direct captioned embeds — no embed.js needed.
Thumbnails come from TikTok's keyless oEmbed; tap to load the player, swipe away to destroy it.
The theme class on the wrapper defines the tokens; the carousel inherits them at render time. No JS theme watcher needed — click to cycle.
Dots and arrows restyle themselves from the active theme's tokens.
The out-of-the-box look: plain chevrons either side of the dots.
Resize below 768px wide and it collapses back to the stacked layout.
Title, description, arrows and dots live in the left column on larger frames.
Same aside layout, mirrored: the carousel leads and the text column follows.
One slide means one scroll position: dots never render, and the arrows are dropped once Embla confirms the count. (SSR keeps arrows while the count is unknown so multi-slide carousels don't get a nav pop-in.)