MediaCarousel — Loidolt Theme

import { MediaCarousel } from '@loidolt/theme-svelte';

Example

Ridge relief — 14 layers of birch ply

Slides are named groups ("2 of 5: Canyon relief"). The slide area is a polite live region while the user drives it, and silent while it rotates on its own.
autoplay pauses while the pointer or focus is inside, always offers a pause button (WCAG 2.2.2), and starts paused when the user prefers reduced motion.

Generated from the component source, so it cannot drift from the implementation.

MediaCarousel props
Prop	Type	Default	Notes
`items` required	`MediaItem[]`	`—`
`label` required	`string`	`—`	Accessible name of the carousel.
`autoplay`	`boolean`	`false`	Advance on a timer. It pauses while the pointer or focus is inside, offers a visible pause button (WCAG 2.2.2), and starts paused for people who prefer reduced motion.
`class`	`string`	`—`
`index` bindable	`number`	`0`	The slide showing, 0-based.
`interval`	`number`	`5000`	Milliseconds per slide when autoplaying.
`loop`	`boolean`	`true`
`nextLabel`	`string`	`'Next slide'`
`onIndexChange`	`(index: number) => void`	`—`
`pauseLabel`	`string`	`'Pause slideshow'`
`playLabel`	`string`	`'Start slideshow'`
`previousLabel`	`string`	`'Previous slide'`
`ratio`	`AspectRatioName \| number \| string`	`'video'`
`ref` bindable	`HTMLElement \| null`	`null`
`showCaption`	`boolean`	`true`
`showThumbnails`	`boolean`	`false`
`slideLabel`	`(position: number, count: number) => string`	(position, count) => `${position} of ${count}`
`thumbnailsLabel`	`string`	`'Slides'`

Plus the attributes of Omit<HTMLAttributes<HTMLElement>, 'children'>, forwarded to the root element.