synthetic
Carousel
One slide at a time, with arrows, dots and an N of M count. Keep every slide the same shape.
Harbour rebrand photosFour slides at one aspect ratio
1 of 4
1 of 2
1 of 1
In context
Project galleryPhotos from the project, with the file list beside them
Harbour rebrand
1 of 3
van-livery-photos.zip, mark-stacked.svg
Props
| Prop | Type | Required | Default |
|---|---|---|---|
children | ReactNode[] | Yes | — |
className | string | undefined | No | — |
defaultIndex | number | undefined | No | 0 |
index | number | undefined | No | — |
onIndexChange | ((index: number) => void) | undefined | No | — |
aria-label | string | undefined | No | Carousel |
Accessibility
Root is role="region" with aria-roledescription="carousel"; each slide is a role="group" labelled "N of M" and hidden while off-screen. Left and right arrows navigate when focused; the position text is aria-live="polite".
data-rebar-* attributes
data-rebar-component="carousel" on the root; data-rebar-part values viewport, track, slide, controls and dots.
Migrating to Ant Design
Not codemod-covered. AntD's carousel is slide-count driven rather than children driven, so this is a structural rewrite.