Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProSlides stacked in one place that cross-fade: swipe, arrow keys, dots and buttons, with hidden slides inert.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a hero, a quote or a status panel, where sliding feels like too much and the slides share one position.
Do not use it when people need to see a neighbouring slide while dragging, or for more than about eight slides.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselFade | items | CarouselItem[] | required | { id, label, content }. |
CarouselFade | label | string | required | Accessible name of the carousel. |
CarouselFade | loop | boolean | true | Wrap around at the ends. |
CarouselFade | duration | number | 500 | Cross-fade time in ms. Zero with reduced motion. |
CarouselFade | onIndexChange | (index) => void | - | Called when the slide changes. |
CarouselFade | index | number | - | Controlled slide index. Leave unset to let the carousel keep its own. |
CarouselFade | rotating | boolean | false | Set while a timer advances the slides: turns the live region off. |
CarouselFade | controls | boolean | true | Show the arrows and dots under the stage. |
The component ships with a Testing Library test (carousel-fade.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.