Carousel
Add swipeable pages with page dots, optional auto advance and looping.
Use a Carousel for feature tours, testimonials or screenshots that visitors swipe through. Each page is a stack, so a page can hold anything.
Add it
- Drag Carousel from Interactive onto the phone.
- Or hover a layer in Layers, click +, then Interactive, then Carousel.
You get two pages, each with a bold title and a description on a pastel card, and page dots at the bottom.
Where it can go
In stacks, the header, the footer and tab content. It is interactive, so not inside a button, plan, answer or tab button. It has no + in Layers: add pages with Add page, and add content by hovering a page row and using its +. Only stacks can be pages.
Design panel
| Section | Control | What it does | Default |
|---|---|---|---|
| Layout | Page Alignment | Top, Center, Bottom for pages of different heights | Center |
| Page gap | Space between pages, px | 16 | |
| Page peek | How much of the neighboring pages shows, px | 16 | |
| Loop | Wraps from the last page to the first | Off | |
| Active Page | Menu | The first page shown, and shown on the canvas | First |
| Spacing | Padding, Margin | 8 top and bottom | |
| Fill, Border, Drop Shadow | Stack controls | Off | |
| Auto Advance | Time per page, Transition time (ms), Transition (Slide or Fade) | Moves pages by itself. Click + to turn on. | Off; 2500, 500, Slide |
| Page Control | Position (Top, Bottom), Dot spacing, Padding, Margin | The dots. Click + to turn on. | On, bottom, 8 |
| Active Dot, Default Dot | Width, Height and a solid Color each | 5 by 5, dark translucent | |
| Pages | List, Remove page, Add page | Each row shows the page's first text. |
Style a page by selecting it in Layers or on the canvas: it is a normal Stack. You can also drag pages to reorder them in Layers, and duplicate them.
States
Swiping on the canvas previews a page and stays while you edit, but is not saved. Active Page is saved.
Dark mode and screen sizes
Page fills and dots are light only by default. Add dark colors. Peek and gap are fixed pixels.
Tips and common mistakes
- Give each carousel a unique name in Layers, or previews can jump together.
- Keep pages similar in height to avoid jumping layouts.
- Do not rely on auto advance for important content.
In the JSON
The component type is carousel, with pages (stacks), page_alignment, page_spacing, page_peek, loop, initial_page_index, auto_advance and page_control.