Media · Carousel

Carousel

Horizontally or vertically scrollable rail of slides with keyboard, button, indicator, drag and autoplay navigation. One slide per page. Pattern follows the WAI-ARIA carousel pattern with role="region" + aria-roledescription="carousel"; indicators map 1:1 with slides as a tablist.

parts{compiled.parts.order.length} events{events.length} sizes5 apg carousel ↗ index {value}

{#snippet children(snippet: CarouselProviderSnippetProps)} {(api = snippet.api, isPlaying = snippet.isPlaying, '')} {#each slides as slide, i (slide.label)}

{slide.label} {slide.sub}

{/each} {#each slides as _, i (i)} {/each} {/snippet}

trace {#if trace.length === 0} arrow keys · drag · click indicators {:else} {#each trace.slice(0, 3) as entry (entry.at)} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} index {value}

{#if tab === 'live'}

Controls

Soma owns the index, autoplay timer, drag gesture, keyboard nav and orientation. Eidos adds chrome (variant / size / color) and renders the prev/next triggers as eidos <Button iconOnly variant="ghost"> via the canonical Button consumer pattern.

soma layout

orientation {#each ['horizontal', 'vertical'] as o (o)} {/each} slidesPerView {#each [1, 2, 3, 4] as n (n)} {/each} slidesToScroll {#each [1, 2, 3] as n (n)} {/each} align {#each ['start', 'center', 'end'] as a (a)} {/each} gap (rem) {gap} verticalBlockSize (rem) {verticalBlockSize} loop {loop ? 'on' : 'off'} disabled {disabled ? 'on' : 'off'}

soma drag

dragEnabled {dragEnabled ? 'on' : 'off'} dragThreshold (0–1) {dragThreshold.toFixed(2)}

soma autoplay

autoplay {autoplay ? 'on' : 'off'} autoplayDelay (ms) {autoplayDelay} playOnInit {playOnInit ? 'on' : 'off'} pauseOnHover {pauseOnHover ? 'on' : 'off'} stopOnInteraction {stopOnInteraction ? 'on' : 'off'} stopOnFocusIn {stopOnFocusIn ? 'on' : 'off'} stopOnMouseEnter {stopOnMouseEnter ? 'on' : 'off'} stopOnLastSnap {stopOnLastSnap ? 'on' : 'off'}

soma imperative API exposed via the api snippet prop — drive the carousel from external buttons

isPlaying = {isPlaying}

eidos visual props

variant {#each ['surface', 'outline', 'ghost'] as v (v)} {/each} size {#each ['xs', 'sm', 'md', 'lg', 'xl'] as s (s)} {/each} color {#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as c (c)} {/each}

eidos composition · with bind:value svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

8 parts: Provider, Viewport, ItemGroup, Item, PrevTrigger, NextTrigger, IndicatorGroup, Indicator.

Provider (Carousel)

Prop	Type	Default	Description
value bindable	number	0	Current slide index (0-based).
defaultValue	number	0	Initial slide index when uncontrolled.
onValueChange	(i: number) => void	—	Called on every index change.
orientation	'horizontal' \| 'vertical'	'horizontal'	Scroll axis.
slidesPerView	number	1	Slides visible at once (each Item basis = 100% / slidesPerView).
slidesToScroll	number	1	Slides advanced per next() / prev().
align	'start' \| 'center' \| 'end'	'start'	Alignment of active slide(s) within viewport.
gap	string (CSS length)	'0px'	Inline-axis gap between slides.
loop	boolean	false	Wrap at edges (also wraps autoplay).
dragEnabled	boolean	true	Allow pointer drag to scrub.
dragThreshold	number (0–1)	0.25	Release fraction past which next slide commits.
autoplay	boolean	false	Enable timer-driven advance.
autoplayDelay	number (ms)	4000	Interval in milliseconds.
playOnInit	boolean	true	Start the autoplay timer on mount.
pauseOnHover	boolean	true	Pause autoplay while hovered.
stopOnInteraction	boolean	false	Latch-stop after user clicks prev/next/indicator or drags.
stopOnFocusIn	boolean	true	Pause while focus is inside root.
stopOnMouseEnter	boolean	false	Pause while cursor over root (Embla parity).
stopOnLastSnap	boolean	false	Latch-stop when last snap reached (loop=false only).
disabled	boolean	false	Disable all navigation.
aria-label	string	—	Override accessible name (falls back to lang ref).
variant eidos	ControlVariant: 'surface' \| 'outline' \| 'ghost'	'surface'	Container chrome.
size eidos	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Cascades to indicator + trigger size.
color eidos	ColorRole	'primary'	Indicator + focus accent.
block eidos	boolean	true	Stretch root inline-size to container.
verticalBlockSize eidos	string (CSS length)	'16rem'	Viewport block-size in vertical orientation.

Viewport · ItemGroup

Viewport is the overflow: hidden clipping box. ItemGroup is the translatable strip whose transform the provider drives. Both are pass-through — no eidos-specific props.

Item

Prop	Type	Default	Description
index	number	required	0-based slide index. Used for `aria-roledescription` + indicator wiring.
children	Snippet<[{`{ index, isActive }`}]>	—	Slide body. Receives active flag for per-slide effects.

PrevTrigger · NextTrigger

Prop	Type	Default	Description
variant eidos	ControlVariant: 'surface' \| 'outline' \| 'ghost'	'ghost'	Button variant.
size eidos	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	cascades from Carousel	Button size override.
rounded eidos	ButtonRounded	'full'	Corner radius.
intent eidos	Intent	—	Evaluative intent.
color eidos	ColorRole	—	Hierarchical color (under intent='neutral').
iconOnly eidos	boolean	true	Square aspect, label sr-only.
icon eidos	Snippet	chevron	Override default arrow glyph.
child soma	Snippet	—	Bypass Button entirely; render custom element.

IndicatorGroup · Indicator

Prop	Type	Default	Description
index (Indicator)	number	required	0-based slide this indicator navigates to.
aria-label (Indicator)	string	—	Override accessible name; falls back to "Go to slide {`{n}`}".
children (Indicator)	Snippet<[{`{ index, isActive }`}]>	—	Custom indicator body (default is a dot).

{/if} {#if tab === 'morfo'}

morfo · declarative contract

Source: src/uix/morfo/components/carousel.ts.

Field	Value
name	"{carouselMorfo.name}"
kebab	"{carouselMorfo.kebab}"
apg	{carouselMorfo.apg}
parts.length	{carouselMorfo.parts.length}
events.length	{events.length}

Parts

{#each partsList as part (part.kebab)} {/each}

Part	Marker	Element	Role	Archetype	States	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.archetype ?? '—'}	{part.states.length ? part.states.join(' \| ') : '—'}	{part.optional ? 'yes' : 'no'}

Events declaration

{#each events as action (action.name)} {@const sem = action.semantic} {@const intentDecl = 'intent' in sem ? sem.intent : undefined} {@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'} {/each}

name	family	verb	sequence	intent	target
{action.name}	{sem.family}	{sem.verb ?? '—'}	{sem.sequence ?? 'pre'}	{intentStr}	{action.target}

{/if} {#if tab === 'sema'}

sema · events

{#each events as action (action.name)} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined} {/each}

Name	Family	Verb	Sequence	Intent	Play
{action.name}	{action.semantic.family}	{action.semantic.verb ?? '—'}	{action.semantic.sequence ?? 'pre'}	{effectiveIntent ?? '—'}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors at src/uix/eidos/components/carousel/carousel.css.

Selector	Source	What it paints
[data-carousel]	eidos	Root — flex column, gap, font.
[data-carousel][data-variant]	eidos	Surface / outline / ghost chrome around the rail.
[data-carousel][data-size]	eidos	Indicator dot diameter + gap.
[data-carousel][data-color]	eidos	Active-indicator accent + focus ring.
[data-carousel-viewport]	morfo	Clipping box (overflow hidden, inline soma styles).
[data-carousel-item-group][data-dragging]	morfo	Transform transition off while dragging.
[data-carousel-item]	eidos	Slide — 100% basis along axis.
[data-carousel-prev-trigger] · [data-carousel-next-trigger]	eidos	Absolute-positioned over viewport edges; vertical flips to top/bottom.
[data-carousel-indicator][data-state='active']	eidos	Active indicator: accent fill + 2.25× inline-size stretch.

{/if} {#if tab === 'a11y'}

Accessibility

Follows the APG carousel pattern. The root is role="region" with aria-roledescription="carousel" + an accessible name. Each slide is role="group" with aria-roledescription="slide". Indicators form a role="tablist" with role="tab" children.

Keyboard

Key	Action
ArrowRight / ArrowDown	Next slide.
ArrowLeft / ArrowUp	Previous slide.
Home	First slide.
End	Last slide.
Tab	Move focus through prev / next / indicators / inner slide controls.
pointer drag	Scrub between slides; commits when past `dragThreshold`.

ARIA contract

Part	Attribute	Value
provider	role	"region"
provider	aria-roledescription	"carousel"
provider	aria-label	localized "Carousel"
item	role	"group"
item	aria-roledescription	"slide"
prev-trigger / next-trigger	type / aria-label	"button" / "Previous slide" \| "Next slide"
indicator-group	role / aria-orientation	"tablist" / orientation
indicator	role / aria-selected	"tab" / "true\|false"

{/if}