Carousels (slideshows)

Understand how to create and test for accessible carousels and slideshows.

Note: This is a stub article — it contains a small amount of useful guidance that we hope to expand later. If you would like to contribute to expanding this article, email

What are carousels?

A carousel — also known as a slider or slideshow — is an interactive widget used to present multiple slides or panels of content, one at a time. Some carousels allow users to see more than one slide or panel at a time.

A carousel typically includes buttons for displaying the next or previous slides, or sliding the panels to the left or right. Often, there is a set of small buttons with no text labels, one for each slide in the carousel. These enable the user to press a button and jump to a specific slide.

Sometimes, a carousel will start advancing through its slides automatically as soon as the page loads and without the user’s express permission.

For some examples of carousels, see ColorLib’s 20 Best Bootstrap Carousel Examples 2023.

Note: Avoid carousels as much as possible.

Carousels are widely considered to provide a poor user experience. Designers are strongly encouraged to consider other user interface designs.

Some typical issues with carousels include:

  • animation that distracts users’ attention
  • poor screen reader accessibility
  • poor keyboard-only accessibility
  • there's not enough time for users to read a slide before the next slide is automatically displayed
  • content is hidden in slides that haven’t been displayed yet, making their discovery more difficult for users.

To learn more about why carousels provide bad experiences for all users, see:

Where the decision has been made to use a carousel, see the following guidance and examples for making one that is accessible:

Testing carousels