Overview

Carousel

Usage

When to use
Use carousels when you would like to present a set of related content, allowing users to navigate the content by swiping through the container. The carousel container supports a range of informational content, including text, images, call to actions, and videos. You can use it in various cases such as hero sections, featured highlights, and promotional materials.
How best to use
Desktop web
Do
Previous/next buttons should always be visible for desktop users to ensure easy navigation and better accessibility. The pagination indicators are optional.
Tablet/mobile web and app
Do
For carousels with single-content focus, use pagination indicators to facilitate navigation between content pieces. Alternatively, use swipe gestures to give the illusion of continuity, so all controls can be hidden.
Caution
Avoid using previous/next chevrons for mobile web if swiping gestures are enabled, as it could lead to conflicting interactions. Relying solely on swipe gestures provide a more intuitive navigational experience.
In general
Caution
Limit the number of carousels on a page, as they're both content and interaction heavy, which could overwhelm users or add too much pageload.
Do
We recommend no more than 8 frames for carousels with single-content focus, and no more than 3 to 4 frames for carousels with multi-content focus. The most important or newest content should always be displayed first.
Caution
Infinite looping can be enabled if you would like users to be able to view content more than once. This should be implemented with care since it may be distracting.
Caution
Only use auto-rotation in a looping carousel, and always include play/pause buttons. Rotate through the frames at a suitable speed to give users enough time to digest the information.
Do
Add a section title with navigation to allow users to access additional available items.
When not to use
Don't use within interactive components
Don't embed carousels within interactive components, such as tabs and accordions, as it's complex and confusing to interact with.
⁠
Don't use when the user needs to read or compare all of the information on a page
Keep all content visible instead of breaking it up and hiding it in multiple carousels, so users don't miss out on key information.
Component comparison table
Component
Interaction
Appearance
Carousel
Content is scrolled through one by one, with each frame of content snapping into view.
Can have pagination and buttons, which help users navigate through the content.
Tabs and chip group (scrollable view)
Users can scroll continuously and interact with the chip content.
No additional navigational controls.
Carousel
Tabs and chip group (scrollable view)