Carousel

Slideshow of and-carousel-item slides with previous/next controls, dot indicators, and optional autoplay.

When autoplay is on, a pause/play button is shown — required for WCAG 2.2.2 (content that moves for more than 5s must be user-pausable). Autoplay also pauses automatically while any control inside the carousel has focus.

Example

Slide 1

Slide 2

Slide 3

<and-carousel label="Featured colors">
  <and-carousel-item label="Slide 1">...</and-carousel-item>
  <and-carousel-item label="Slide 2">...</and-carousel-item>
  <and-carousel-item label="Slide 3">...</and-carousel-item>
</and-carousel>

Properties

and-carousel (root)

Property	Attribute	Description	Type	Default
autoplay	autoplay	Whether the carousel auto-advances. A pause/play control is shown whenever this is true.	boolean	false
interval	interval	Interval in ms between auto-advances.	number	3000
label	label	ARIA label for the carousel region.	string	'Carousel'

and-carousel-item

Property	Attribute	Description	Type	Default
label	label	Accessible label announced for this slide (e.g. “Slide 1 of 3” context).	string	''

Events

Event	Description	Type
andSlideChange	Emitted when the active slide changes.	CustomEvent<number>