# Slider

The **Slider** block presents images, videos or content in a full frame and shows one slide at a time. This page describes its navigation blocks, its rotation settings, how slides appear and its keyboard behavior.

## Add the block

Insert the **Slider** block ([Add a block](https://lovelyrender.com/documentation/add-block/)), or type `slider` in the block search. It shows one slide at a time. To show several items side by side, a row of logos for example, use the [Carousel](https://lovelyrender.com/documentation/carousel-block/).

## Add slides

- The **Add media** button, in the slider’s toolbar, opens the media library. Choose several images or videos at once: each becomes a slide added at the end.
- On a slide, **Add before** or **Add after** from the **⋮** menu, or `Ctrl+Alt+T` and `Ctrl+Alt+Y`, insert an empty slide at that spot. Choose its media in the block.
- Move a slide to change the order, delete it to remove it: the indicators follow.

A slide is a [Media](https://lovelyrender.com/documentation/media-block/) block. It gets the saved style **Slider slide**, which replaces the **Image** style of media. A frame or rounded corners chosen for your images do not apply to slides. A style you add yourself stays.

## The blocks that make up the slider

The slider’s navigation is made of blocks that you style like the others, state by state. It follows the slides: a slide added, moved or deleted updates its indicators.

| Block | Role | States |
| --- | --- | --- |
| **Slider navigation** | The row of indicators and arrows. | **Default**, **Hover**, **Active** |
| **Slider navigation item** | An indicator. You place a text, a heading, a media, an icon or a thumbnail in it. | **Default**, **Hover**, **Focus**, **Active** |
| **Slider shape indicator** | A dot-shaped indicator, fully stylable. | **Default**, **Hover**, **Active** |
| **Slider thumbnail** | A miniature that reuses the media of its slide. If the slide changes image, the thumbnail follows. | **Default**, **Hover**, **Active** |
| **Navigation button** | The **Previous** and **Next** arrows. | **Default**, **Hover**, **Focus**, **Active**, **Off** |

The **Active** state of an indicator styles the one for the slide displayed. To put a thick border on the thumbnail of the photo shown, select the indicator, choose the **Active** state in the **Styles** tab and set its border ([Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)).

## Set up the slider

Select the **Slider** block, open the **Settings** tab then the **Slider settings** panel. Some settings depend on the rotation mode: the Effect column says so.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Default active slide** | The slide displayed when the page loads. | **Slide 1** |
| **Show the previous and next slides** | Lines the slides up side by side: the one displayed in the middle, its neighbors extending past the edges. The visitor clicks or drags a neighbor to bring it to the middle. | Off |
| **Cross-fade** | The new slide appears over the previous one, which stays displayed until the new one is. Off, the previous one disappears at once. Absent with neighboring slides. | On |
| **Rotation method** | **Manual**: the visitor moves forward. **Auto**: the slides change by themselves. **Both**: they change by themselves and the visitor can navigate. | **Manual** |
| **Navigation type** | **Symbol**: indicators that you compose. **Thumbnail**: each indicator gets a miniature of its slide. **None**: no indicators, the arrows stay. In **Manual** or **Both** mode. | **Symbol** |
| **Disable arrow navigation** | Removes the previous and next arrows. Grayed out with the type **None**. Conversely, **None** is grayed out when the arrows are removed: the slider always keeps a navigation. In **Manual** or **Both** mode. | Off |
| **Navigation position** | Places the indicators **Top**, **Right**, **Bottom** or **Left** of the slider. In **Manual** or **Both** mode. | **Top** |
| **Show a pause button** | Places a button that stops the rotation. In **Auto** or **Both** mode. | On |
| **Random rotation time** | Draws the interval between two slides at random, between a minimum and a maximum. In **Auto** or **Both** mode. | Off |
| **Rotation time (ms)** | The display time of a slide, from 500 to 10,000 ms. | 2,000 ms |
| **Minimum rotation time (ms)** and **Maximum rotation time (ms)** | The bounds of the randomly picked interval, from 500 to 10,000 ms. With **Random rotation time**. | 2,000 ms and 3,000 ms |

![The Slider settings panel in Manual mode: Default active slide on Slide 1, Show the previous and next slides off, Cross-fade on, Rotation mode, Navigation type on Symbol, Disable arrow navigation and Navigation position on Top.](https://static.lovelyrender.com/uploads/2026/10/910-doc-blocs2-diaporama.png)

**Warning:** In **Auto** mode, the navigation is hidden: the indicators do not follow the automatic rotation. To keep clickable indicators during rotation, choose **Both**.

## Automatic rotation

A slider does not turn by itself until you decide so: the starting mode is **Manual**. In **Auto** or **Both** mode, it gets a pause button.

- The button is a 44 px circle at the top right of the slider. It stays discreet during rotation and becomes clearly visible on hover, on the keyboard or once the rotation is stopped. It carries the pause icon, which becomes the play icon when stopped. A screen reader announces it as **Pause the slideshow**.
- The button is not a block: it cannot be moved or deleted. Only the **Show a pause button** checkbox removes it.
- Rotation stops while focus is in the slider. Choosing a slide restarts the count from zero.

Without a pause button, the slider stops under the pointer, on touch and when the keyboard reaches a link it contains. Slides without a link cannot be stopped from the keyboard. The panel then shows a warning. The **Accessibility** panel of the editor flags the same defect, under WCAG criterion 2.2.2.

**Note:** For a visitor who asks for less motion, a slider in **Both** mode stays on its starting slide. It is navigated with its navigation, with no pause button. In **Auto** mode, it keeps turning with no fade and keeps its button: stopped, its other slides would never be seen.

## How a slide appears

Each slide gets, when added, a **Fade in** animation of 600 ms, triggered **When activated** and set to **Replay**. You find it in the slide’s **Animations** tab.

- For another effect, replace the fade in the **Animations** tab. Each slide can have its own.
- For a transition with no effect, delete the animation. A removed animation is never put back.
- With **Cross-fade**, the slide that leaves stays displayed under the new one during its whole fade: the slider’s background is never seen.
- With **Show the previous and next slides**, no slide gets this fade: it would make the neighbors invisible.

Displaying the active slide and hiding the others is handled by the **Slider slide** style. On a slide, the **Hide this block** checkbox of the **Styles** tab is grayed out. A hidden slide leaves the page: the keyboard does not enter it and a screen reader does not read it.

## Neighboring slides

With **Show the previous and next slides**, the slider shows a row: the middle slide and a bit of its two neighbors. The last slide is followed by the first.

- A slide takes up 80% of the slider until you give it another width, in the **Styles** tab. A narrower slide shows more of its neighbors.
- The **Default** state of the slide styles the neighbors, its **Active** state the one in the middle. An opacity of 50% in the **Default** state and 100% in the **Active** state dims the neighbors.
- Neighbors are not read by the keyboard or by a screen reader: they are reached with the arrows and the indicators.

## On a phone

With neighboring slides, a finger swipe sideways brings the neighbor to the middle. For a visitor who asks for less motion, the slides change place without sliding.

## Accessibility

- The indicators respond to the keyboard: `←` and `→` move from one to the other, `Enter` or `Space` chooses.
- A screen reader announces the navigation as a set of tabs, each indicator with its position and its state. Each slide is linked to its indicator.
- The arrows activate on click, on `Enter` and on `Space`. They work without indicators, with the navigation type **None**.

**Tip:** For a three-image home visual, keep **Manual** mode: nothing moves before the visitor’s eyes and they choose for themselves.

## See also

- [Carousel](https://lovelyrender.com/documentation/carousel-block/)
- [Tabs](https://lovelyrender.com/documentation/tabs-block/)
- [Media](https://lovelyrender.com/documentation/media-block/)
- [Animate a block](https://lovelyrender.com/documentation/animate-block/)