Slider

Used to display content in a carousel.

How to use

Add an optional heading and pages or blocks to the slider area. A block shows in full and a page as its teaser. A visitor moves with the Previous and Next buttons, or swipes on a phone. Tick Autoplay to advance on its own, and Infinite loop to go from the last slide to the first.

Variants

With heading

Six blocks under a heading. The Previous button says this is the first slide, and Next says so of the last.

How we can help

Slides only

Six blocks with no heading.

Autoplay

The slider advances every three seconds and starts over after the last slide. It stops while the visitor hovers over it or moves focus into it, and the Pause button stops it. It does not start on its own when the visitor has asked for reduced motion.

How we can help

Infinite loop

Next after the last slide goes to the first, and Previous before the first goes to the last.

How we can help

Layout preview

4 copies of one example in a layout block. Change the settings to see how the block fits each layout.

How we can help

How we can help

How we can help

How we can help

Viewport preview