<st-carousel>

JSON type: Carousel

Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place of the source's framer-motion spring), or fades in with transition="fade". Autoplay pauses while hovered (unless pause-on-hover is turned off, e.g. for a full-screen hero the pointer nearly always rests on) or focused, and stops when the element is disconnected; a paused slide keeps the time it had left. Under prefers-reduced-motion: reduce autoplay starts paused; the tabs' play button still starts it.

indicator-style="tabs" replaces the dots with a row of labelled tabs along the bottom, each with a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero carousel layout (put st-heros in it). Tab labels come from tab-labels, else each slide's data-tab-label attribute, else its title.

Usage

import '@sankhyatronics/sankhya-cms/carousel'; // registers <st-carousel>

Properties

Property	Attribute	Type	Default	Description
autoPlay	auto-play	boolean	true
interval	interval	number	5000	Autoplay delay in milliseconds.
pauseOnHover	pause-on-hover	boolean	true	Pause autoplay while the pointer is over the carousel. Turn off for a hero that fills the screen; the tabs' pause button and keyboard focus still pause it.
showArrows	show-arrows	boolean	true
showIndicators	show-indicators	boolean	true
indicatorStyle	indicator-style	'dots' | 'tabs'	'dots'	dots (default) or tabs: labelled tabs with progress bars along the bottom.
transition	transition	'slide' | 'fade'	'slide'	slide (default) or fade.
tabLabels	—	string[]	[]	Tab labels, one per slide, for indicator-style="tabs". Missing entries fall back to the slide's data-tab-label, then its title.

Events

Event	Detail	Description
carousel-change	CustomEvent	Detail { index }, when the visible slide changes.

See the live examples in Storybook.