Animated Slider

Usage

Animated Slider is a full-width slideshow. Each Animated Slide has a headline and an optional button over a looping, muted background video. The slider moves to the next slide by itself, and visitors can use the arrows and dots, or swipe.

Add the block and it starts with one slide. Type the headline on the slide itself. Choose the video, the button link and where the text sits in the slide's sidebar. Click Add Slide under the last slide for another one.

In the editor the slides are stacked one under another, each at the height it has on the site, so you can edit them all without clicking through. The slider's own settings (how long each slide stays, and how tall the slider is) appear when you select the Animated Slider itself; use List View or the breadcrumb at the bottom of the editor to select it.

When to use it

Use it at the top of a page when a short video says more than a photo: a product in motion, a place, a process.

Keep headlines short: they sit on top of the video.

Each slide's headline is an H2 in the page outline, and looks like your site's H1 whatever its level. A page should have one H1. If the slider opens the page and nothing else is the page's main heading, set Heading Level to H1 on the first slide and leave the others at H2.

Don't put essential content on later slides. Most visitors never move past the first one.

For slides that hold other blocks, or photos instead of videos, use Slider.

Tips

• Use short MP4s without sound, compressed for the web. Every slide's video starts loading with the page.
• Set a cover image on each video in the Media Library. It shows while the video loads.
• Turn Reverse Print off when the video is light, so the text is dark.
• A slide without a video shows only its text on the page background.
• A slide with an empty headline has no heading at all, only its button.
• Visitors can pause the slideshow with the pause button that appears at the bottom right when they hover or tab into the slider.
• Sliders built in Dirigible Blocks Extended keep working as they are, and their settings move over the first time you change one. Their headlines stay H1, as they were: change Heading Level on each slide that shouldn't be the page's main heading.