The left hand navigation is removed for demonstrating this component as a home page.


The carousel is also sometimes referred to as the "slider" or "slides".

It works by rotating group of images that can house info and text, video content - or just be a visual decorative feature.

There are two types of carousel available:

  • type 1 has the information text at the side of the image
  • type 2 has the information at the bottom of the image

Each slide has:

  • heading
  • description
  • image
  • button text
  • URL link (button)
  • transcript link (button) for video content

The feature allows up to 6 carousel slides. The order can be controlled.

If you only define one slide it will not rotate or be animated.

Feature showcase

Type 1 - image only

If not marked as decorative, all images must have alternative (or alt) text to describe the information or function of the image:

Type 2 - image only

This type of carousel has a gradient in the primary colour of the site.

Static hero image

The heading and other text features can be left blank and the slide will become a static hero image.

Display is the same for type 1 or type 2 carousels.


You have the option to add videos to the carousel.

For each video you'll need to supply captions and transcripts.

Captions and transcripts benefit everyone and are needed for all audio and visual content:

Type 1

Type 2

Add this feature to your site

Guide to adding a carousel (requires log-in)

Top accessibility tip

Create link text that’s as specific as possible. Don't just use 'click here', 'read more', 'find out more' or 'download' for your carousel buttons. These terms do not make sense for people using screen readers: