Slideshow

Usage

Slideshow is a free-form content slider. Each slide is an empty panel you fill with any blocks: columns, lists, paragraphs, images, or other Dirigible blocks. Where Lookbook gives you ready-made magazine layouts, Slideshow starts blank.

On desktop, visitors move through slides one at a time using the arrows and dots below, or by scrolling sideways on a trackpad. Every slide is as tall as the tallest one, and shorter slides sit centred, so the page below never jumps. On phones, the slides stack.

To add a slide, select the Slideshow block and use the inserter inside it. Select a Slide to add blocks to it or change its style.

Slider settings

Select the Slideshow block for settings that apply to every slide:

• Wraparound: on by default. The slider loops from the last slide back to the first.
• Autoplay: off by default. Turn it on to advance slides automatically.
• Autoplay Interval: seconds between slides (default 3). Appears when Autoplay is on. Autoplay keeps going when a visitor hovers over the slider, and doesn't run for visitors who've turned on reduced motion in their device settings. Visitors can stop it with a small pause button at the bottom right, which appears when they hover over the slider or reach it with the keyboard (on phones and tablets it's always shown).

Slide settings

Select a single Slide for these settings:

• Horizontal Padding: space inside the slide on the left and right (default 8).
• Vertical Padding: space inside the slide on the top and bottom (default 6).
• Corners: Rounded (default) or Sharp.
• Reverse Print: light text for dark backgrounds.
• Background: the slide color from your theme palette (default Gray), or None.

Blocks inside a slide can use the slide's full width.

Editing tips

In the editor, all slides show at once. Use the breadcrumb trail at the bottom of the editor to move between the Slideshow, a Slide, and the blocks inside it.

Block width

Slideshow supports Wide, Full, and Center alignment and defaults to Wide.

Tips

• Keep slides about the same height. One tall slide makes the slider that tall, with empty space around the short ones.
• Set Background and Reverse Print on each Slide rather than recoloring headings, so palette changes stay easy.
• For ready-made photo layouts, use Lookbook or Storyboard Slider. For rotating photos or logos, try Photo Block Slider or Logo Carousel.