Components

Carousels

Carousels are used to display a collection of images allowing the user to browse through the list of items in a circular fashion. This is useful when there is not enough space to show all items at once.

  • Only use a carousel if necessary and when there is no other way to show the content. See Should I Use A Carousel?
  • The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
  • Do not use for important information.
  • Only use for displaying images. Do not use text on images.
  • Only use between 3 to 8 images.
  • If possible set the data-interval is set to false by default.

Important If your site is in Ektron please use the Carousels content module rather than copying and pasting the code. Read the Ektron documentation.

Basic carousel

Top of page

Carousel with indicators

Top of page

Carousel with captions

Top of page

Carousel with content

Top of page