Fan Carousel
3D fanned cards: the centre card stands upright with a caption and pill call to action, while side cards turn, shrink and fade, moved by swipe, drag, arrow keys or buttons.
Preview
Red Mesa
Desert loop · 5 days
Red Mesa, 3 of 6
Looping · drag, swipe, use arrow keys or the buttons · trip 3 of 6
Alder Ridge
Cabins · from $184
Alder Ridge, 1 of 3
Small · stops at the ends · one card each side
No saved trips yet.
Empty
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FanCarouselItem[] | — | Cards to show: image or art, title, caption and an optional action. |
| label | string | "Gallery" | Accessible name of the carousel region. |
| defaultIndex | number | 0 | Starting card when uncontrolled. |
| index | number | — | Controlled active card; pair with onIndexChange. |
| onIndexChange | (index: number) => void | — | Called when the active card changes. |
| loop | boolean | true | Wrap from the last card to the first. |
| visible | number | 2 | Side cards shown on each side of the centre card. |
| size | "sm" | "md" | "md" | Card size: sm 11x14rem, md 14x18rem. |
| emptyLabel | string | "Nothing to show yet." | Text shown when items is empty. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.