Media
Carousel
Horizontal swipe gallery for featured images. Designed for hero banners, campaign highlights, promo slides, and top-of-screen showcase sections. Images are picked from device and uploaded to cloud storage - slides work for all app users, not just the editor’s device.
Minimum 3, maximum 5. Empty slots show a placeholder - no broken blank areas.
Swipe, arrows, and autoplay are disabled on the canvas so the block can be dragged. Enable in preview or live runtime.
Available on all plans.
Four things worth knowing
Real image slots with cloud upload
Each slide holds a real image picked from device. When the app has an appId, images are uploaded to cloud storage - saved carousels work for all app users, not just the editor’s device.
Placeholder state for empty slides
Empty slots show a blue image icon with a short prompt to add a carousel image. No broken blank areas appear before content is configured.
Per-slide editing from the property panel
Each slide card supports pick, change, clear, remove (when above 3 slides), and add new (up to 5 total). No raw text fields - a dedicated slide manager handles it all.
Builder mode vs. preview mode
Swipe and autoplay are disabled on the canvas so the block can be dragged. Switch to preview or deploy to see real carousel behavior - dots, arrows, and autoplay all activate.
Find it, drop it, add images
Where to find itAdd it to any screen
- Component picker → Media → Carousel.
- Drop it on any screen - hero sections and landing screens work best.
- Open the edit panel to manage slides.
Before you publishThree things to check
- Add 3 to 5 images from device using the slide manager - empty slots show placeholders to all users.
- Use consistent image aspect ratios across slides so the carousel feels intentional.
- Test in preview - swipe and autoplay only behave like a real carousel outside the canvas.
Slides, layout, and playback
Every prop below is set directly in the property panel. Start with the images, then adjust height and resize mode - the rest are optional refinements.
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | [”, ”, ”] | Slide image list. Empty items render the placeholder state. |
height | number | 200 | Controls carousel visual height. |
imageResizeMode | select | ’cover’ | How slide images fit: cover, contain, or stretch. Prefer cover for banners. |
borderRadius | number | 12 | Rounds image and placeholder corners. |
showDots | boolean | true | Shows pagination dots below the carousel. |
showArrows | boolean | false | Shows previous/next arrow buttons. Best when the carousel is a primary interaction element. |
autoPlay | boolean | false | Automatically advances slides in preview/runtime. |
autoPlayInterval | number | 3000 | Delay between automatic slide changes in milliseconds. |
Make it yours
Dot and arrow colors are yours to change. The defaults are a neutral starting point - adjust them to match the brand. Captions were intentionally removed to keep the component focused on image-first usage.
| Prop | Default | What it controls |
|---|---|---|
dotColor | #ccc | Inactive pagination dot color. |
activeDotColor | #007AFF | Active pagination dot color. |
arrowColor | #fff | Arrow button text/icon color. |
Common mistakes to avoid
Always add images before publishing
Empty slots show a placeholder to all users - not just in the builder. Fill every slide or remove extra slots before going live.
Use consistent aspect ratios
Mixing portrait and landscape images makes the carousel feel broken. Use images of similar shape across all slides.
3 slides is usually enough
Use 4 or 5 only when each slide adds real value. More slides means more images to maintain and more chances users stop swiping.
Test in preview, not on the canvas
Swipe and autoplay are disabled on the canvas. Always check the carousel in preview mode before publishing to confirm the experience is correct.