What it is
Slider groups several pages into one swipeable sequence. It is the main component for carousels, onboarding steps, and story-like screens.What it’s best for
Use it when users should move through related content one page at a time.When to use it
- Build a multi-step onboarding carousel
- Show testimonials or plan highlights
- Tell a before-and-after story
- Break a long explanation into shorter pages
When not to use it
- Do not use it for a single page. A Stack is simpler.
- Do not overload a slider with too many pages. If the story becomes long, split it into clearer screens.
How to add it in the dashboard
- Open the screen in the dashboard.
- Add Slider from the Components panel.
- Select the slider on the canvas.
- In the properties panel, choose direction, page spacing, and size.
- Add or duplicate slider pages, then edit each page on the canvas.
- Pair it with Page Indicator if users need progress cues.
Key parameters
| Parameter | What it changes | When to adjust it |
|---|---|---|
| Direction | Switches between horizontal and vertical swiping | Use it to match the story or design pattern |
| Width and height mode | Sets whether the slider fills space or uses fixed sizing | Change it when the slider should act like a hero area or a compact section |
| Page alignment | Aligns each page within the slider frame | Use it when pages feel visually off |
| Page spacing | Adds space between pages | Use it to create a lighter carousel feel |
| Page peek | Shows part of the next or previous page | Use it when you want to signal that more content exists |
| Looping | Restarts the slider after the last page | Use it for evergreen showcase content |
| Auto-advance | Moves pages automatically | Use it for guided storytelling or passive previews |
| Auto-advance interval | Controls how quickly pages change | Adjust it when content needs more or less reading time |
| Page control position | Places the built-in progress cue higher or lower | Use it to fit around the rest of the layout |
Example use cases
- A three-page onboarding flow that introduces the product value, shows proof, and ends with a trial CTA
- A paywall story that walks through benefits one page at a time
- A carousel of customer quotes with product screenshots
Best practices
- Keep each page focused on one idea.
- Use short headlines so swiping feels fast and clear.
- Pair the slider with a Page Indicator when there are multiple steps.
- If you enable auto-advance, make sure users still have enough time to read.
Common mistakes
- Putting too much copy on each page
- Hiding that the content is swipeable
- Using too many pages for a simple message