Slide show carousel

This is a carousel with auto-rotating slides. Activate any of the buttons to disable rotation. Use Next and Previous buttons to navigate, or jump to a slide using the slide dots.

Students in office area

Slide example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Students on Main Quad

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Overview

The slide show carousel feature allows you to add rotating content to a page, including an image with optional caption and call-to-action buttons. It may be used for testimonials, storytelling, or to provide an ambiance with general imagery. Various display options are available.

Because interactive elements, such as slide shows, increase the cognitive load for your user, they are problematic when used inappropriately. Use another method to display content if any of these are true:

  • You are using the slide show to replace a page title or banner
  • The information you are displaying is important or time sensitive (event, service hours, urgent information)
  • You only need to highlight a single slide
  • Your images contain embedded text
  • Your captions are more than 70-80 characters (not words) long

Usage guidelines

  • Use images that are of the same size.
  • Either remove images with embedded text or ensure the important aspects of the text is represented alongside the image in the caption field. Embedded text is not accessible and may not be legible on smaller screen sizes.
  • Limit character count for headings and captions, and keep the word count consistent. Captions of varying lengths may cause content below the slide show to jump up and down, making parts of your site unreadable.
  • Avoid linking generic phrases such as "learn more," "read more," or "click here." Instead, link descriptive text.

Responsive layout

This feature loads differently on smaller screens, such as phones and tablets, than it does on wider desktop or laptop computers. Always review how your page will load across different page sizes before publishing.

Documentation