Overview

The carousel is also sometimes referred to as the "slider" or "slides". It works by rotating a group of images that can house text, static images or video content. Carousels can also 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 component can feature up to 6 carousel slides. Editors can control the order. If only one slide is configured the component will not rotate or be animated.

Feature showcase

Type 1 - Image only

The configuration displays the images to the right hand side of a colour block that can feature text related to the image. Editors can configure the component to feature a rolling deck of images and text. Users are able to pause the carousel to focus on a particular slide.

If not marked as decorative, all images must have alternative (or alt) text to describe the information or function of the image: accessibility.sa.gov.au/your-role/content/images

A place to put your great heading

A place to put your great heading

Use this area for a short, snappy introduction to the destination.

Don't use click here
A great heading example

A great heading example

Use this area for a short, snappy introduction to the destination.

Use a descriptive link
Another heading example

Another heading example

Use this area for a short, snappy introduction to the destination.

View the carousel options
Another heading example

Another heading example

Use this area for a short, snappy introduction to the destination.

View the carousel options
Another heading example

Another heading example

Use this area for a short, snappy introduction to the destination.

View the carousel options
Another heading example

Another heading example

Use this area for a short, snappy introduction to the destination.

View the carousel options
scroll down

Type 2 - Gradient colour

This configuration displays a gradient at the bottom of the component in the primary colour of the site. Editors can configure the component to feature a rolling deck of images and text. Users are able to pause the carousel to focus on a particular slide.

A place to put your awesome heading

A place to put your awesome heading

Use this area for a short, snappy introduction to the destination.

Don't use click here
Another great heading

Another great heading

Use this area for a short, snappy introduction to the destination.

Use a descriptive link
Another great heading

Another great heading

Use this area for a short, snappy introduction to the destination.

Return to this page
scroll down

Type 3 - Static hero image

In this configuration, if the heading and other text features are left blank the slide will become a static hero image.

The display is the same for type 1 or type 2 carousels.

scroll down

Type 4 - Combining videos and static images, style 1

You have the option to add videos and static images to the carousel on the right hand side of the colour and text block.

For each video you'll need to supply captions and transcripts. Why? Captions and transcripts benefit everyone and are needed for all audio and visual content: accessibility.sa.gov.au/your-role/content/video-and-multimedia

Video example

Video example

Everyone has a role to play in creating accessible online solutions.

Static image example

Static image example

Carousels can combine videos and images

Don't use click here
scroll down

Type 5 - Combining videos and static images, style 2

You have the option to add videos and static images to the carousel above the colour gradient and it's text.

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: accessibility.sa.gov.au/your-role/content/video-and-multimedia

Video example

Video example

Everyone has a role to play in creating accessible online solutions.

Static image example

Static image example

You can use both images and videos in the carousel

Don't use click here
scroll down

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: accessibility.sa.gov.au/your-role/content/links

Return to Homepage Features Options Next: Promotions Panel