Sliders

Fixed height slider

Height of the slider is determined by the height of the tallest slide. Arrows are hidden on tablet and below. This slider is suitable for consistent height items (same length copy, or same height images).

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Resizing slider

The slider grows or shrinks to match the height of the current visible slide. Navigation arrows hide on tablet and below.

Implementation tip
This component uses custom code to function. View the published site to preview.

To change the behaviour of this component (looping etc.), edit the contents of the Embed element. To change the navigation arrows, update the SVGs and dots in the Embed element.

This component does not support collection lists. Each slide must be a static element.

Heading

Multiple slides slider

More than one slide is visible at a time. The number of slides which are visible can be changed for each breakpoint in the Embed element. The number of slides transitioned on interaction can be set in the Embed element.

Implementation tip
This component uses custom code to function. View the published site to preview.

To change the behaviour of this component (looping etc.), edit the contents of the Embed element. To change the navigation arrows, update the SVGs and dots in the Embed element.

This component does not support collection lists. Each slide must be a static element.

Centered slider

More than one slide is visible at a time. The next and previous slides are faded. The number of slides which are visible can be changed for each breakpoint.

Implementation tip
This component uses custom code to function. View the published site to preview.

To change the behaviour of this component, edit the contents of the Embed element. To change the navigation arrows, update the SVGs and dots in the Embed element.

To edit the opacity change between centred and non-centred slides, update the HTML embed containing this section's custom CSS

This component does not support collection lists. Each slide must be a static element.