Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when the carousel controls live somewhere else: a labelled toolbar with First, Previous, a "Page 2 of 3" readout, Next and Last that controls the carousel through its API and says what it controls.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when the controls belong in a header, a sticky bar or a different part of the layout than the slides, or when you need First and Last.
Do not use it when arrows over the slides are enough. Fewer separate controls is simpler to use and to test.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | - | The slides: { id, label, content }. |
label | string | - | Accessible name of the carousel and the toolbar ("<label> controls"). |
The pattern ships with a Testing Library test (external-toolbar-controls.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.