> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> Use Slider to create swipeable multi-page sequences inside the Flowboard visual editor.

## 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](/components/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

1. Open the screen in the dashboard.
2. Add **Slider** from the **Components panel**.
3. Select the slider on the **canvas**.
4. In the **properties panel**, choose direction, page spacing, and size.
5. Add or duplicate slider pages, then edit each page on the canvas.
6. Pair it with [Page Indicator](/components/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](/components/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

## Related components

* [Page Indicator](/components/page-indicator)
* [Stack](/components/stack)
* [Image](/components/image)
* [Text](/components/text)