Carousels

Five Blocks are carousels: the same working carousel, set up for a different job. Each moves with arrows, dots, a swipe or on its own, and works with a keyboard and a screen reader. Pick the one closest to what you need, then change anything.

Add one from Blocks in the toolbar (see Add and style Blocks), then select it to see its Carousel section in the Design tab.

The settings

Every carousel has the same settings:

• Add pictures: choose several pictures at once; they fill the slides in order.
• Slides: − and + remove the last slide or add one (two at least).
• Shown at once: 1, 2, 3 or 4 slides in view.
• Starts on: the slide it opens on.
• Picture depth: Off, Subtle, Medium or Strong, how far the pictures move in depth as the slides move.
• Arrows, Dots and Swipe and drag: the ways to move it.
• Back to the first after the last: it loops.
• Plays on its own: it moves by itself, Every 2 to 30 seconds.

On the canvas the carousel shows what the settings say: the arrows, dots and pause button shown or hidden, each slide its share of the view. Resize the carousel and the slides follow.

Carousel

Slides that move with arrows, dots, a swipe or on their own. Each slide has a heading and a line of body text to start.

It starts with one slide shown, arrows, dots, swipe and looping on, and does not play on its own.

Picture carousel

Pictures that slide with a sense of depth as they move, each with its caption. Use Add pictures to put your own in.

It starts like the Carousel, with Picture depth at Medium.

Testimonials

What people say about you, a quote at a time, with their face and name.

It starts like the Carousel: one quote at a time, arrows, dots and looping.

Products

Products side by side, three at once, each with a picture, a price and a button.

It starts with three shown, arrows and dots on, and stops at the last product rather than looping. Give each product’s button a link in the Prototype tab.

Logo strip

The logos of the people you work with, passing on their own, four at once, with a Pause.

It starts with four shown, playing on its own every 3 seconds and looping, with no arrows or dots. Visitors can still swipe it.

Catches

• A carousel that plays on its own stops while the pointer or the keyboard is on it, never plays for people who ask for less motion, and visitors can pause it with its Pause button. Delete that button and the section warns you.
• Deleting the arrows or dots while they are switched on stops them working. Turn the option off instead.
• Shown at once cannot be more than the slides you have. Add slides first.
• Slide padding: a slide’s side padding makes room for the arrows (88 px when one is shown, 24 px when several are). Padding you set yourself stays.
• For a phone, set Shown at once to 1 in the phone breakpoint. See Breakpoints.