Carousel

A centred row of slides people browse by dragging, flicking, arrow keys or the controls, with neighbours shrunk and dimmed as a hint there is more.

When to use

• A short, ordered set of peers: listings, product shots, templates.
• When one item at a time deserves focus but people should sense the rest.
• Use CardStack for one-by-one decisions, a grid of Cards when people need to compare items, and Pagination for long collections.

Usage

import { Carousel } from "@/components/iris/carousel/carousel";

h(
  Carousel,
  { label: "Rooms in Athens", defaultIndex: 1, slideSize: "min(80cqw, 320px)" },
  listings.map((listing) => h(ListingCard, { key: listing.id, listing })),
);

Props

Prop	Type	Default	Description
label	string	— (required)	Accessible name for the carousel.
children	ReactNode	— (required)	One child per slide; you provide the slide's surface and content.
index / defaultIndex / onIndexChange	number / number / (i) => void	— / 0	Active slide, controlled or uncontrolled.
slideSize	string	"min(80cqw, 340px)"	Width of one slide as a CSS length; cqw is a share of the carousel width.
slideLabel	(index, count) => string	"2 of 5"	Names each slide and its indicator.
interval	number	—	Milliseconds per slide. Adds a play control; rotation pauses on hover, focus and drag.
autoplay	boolean	false	Start rotating on mount (needs interval).
className	string	—	Extra class on the root.

Notes

• Indicators are a tablist; slides are labelled groups. Left/Right move one slide, Home/End jump to the ends, and changes are announced politely.
• The active indicator stretches into a pill that travels frame by frame with the drag.
• Under reduced motion slides jump into place instead of springing, and autoplay is unavailable.
• The carousel is a size container; give its parent a width.