Carousel

Media · Carousel, ProductArt

A row of slides with previous/next buttons and dots. Swipe or scroll on touch, ←/→ on the keyboard.

perView shows several slides on wide screens; phones always show one (with a peek of the next).
loop wraps around at the ends.
The carousel is a labelled region; each slide is announced as "n of total".

PreviewCode

Halo Cotton Tee€32

Studio Mug€18

Field Bottle€28

Canvas Tote€24

Trail Cap€22

Step 1 of 3Invite your team

Step 2 of 3Connect your mailbox

Step 3 of 3Approve your first draft

Props

Prop	Type	Notes
`slides`	`ReactNode[]`	Required
`label`	`string`	Accessible name of the carousel.
`perView?`	`number`	Slides visible at once on wide screens (1 on phones).
`loop?`	`boolean`	Next on the last slide goes back to the first.
`dots?`	`boolean`	Dots under the slides.
`index?`	`number`
`defaultIndex?`	`number`
`onChange?`	`(index: number) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`kind`	`ArtKind`	Required
`tint?`	`Tint \| "plain"`
`size?`	`number`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.