Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA large carousel with a draggable thumbnail strip that follows it; choosing a thumbnail moves the main slide.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a set of images or items where people want to see the whole set and jump to one: a product gallery, a property listing, a portfolio.
Do not use it for two or three slides, where dots are enough, or for slides with no good small preview.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselThumbs | items | CarouselItem[] | required | { id, label, content, thumb? }. The label names the thumbnail button. |
CarouselThumbs | label | string | required | Accessible name of the carousel. |
CarouselThumbs | loop | boolean | false | Wrap around at the ends. |
CarouselThumbs | viewportClassName | string | - | Classes for the main viewport, such as an aspect ratio. |
CarouselThumbs | onIndexChange | (index) => void | - | Called when the main slide changes. |
The component ships with a Testing Library test (carousel-thumbs.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes in tests.