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), 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.

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 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.

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).

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.

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.

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.

See also

• Carousel
• Tabs
• Media
• Animate a block