Carousel
Carousels allow displaying a related set of content items in a limited space, by splitting the content into different frames. Users can navigate a carousel by interacting with the carousel arrows or dots pagination in larger viewports, or by a swipe gesture on tablet and mobile apps.
Stages, modals, articles collections and image galleries are all elements that can be displayed as carousels.
Usage guidelines
When to use
- To let users switch between slides in a carousel
- To give users information about the amount of content there is to investigate and where they are located within it.
Specifications
Anatomy
- Back button: takes the user to the previous page (can be optionally disabled when the current page is the first).
- Content: it can be a set of cards, an image gallery or a set of stages or modals.
- Next button: takes the user to the next page and is disabled when the current page is the last.
- Current page dot: shows which page the user is current viewing (optionally allow for navigation too).
Elements
The carousel component is made up of dots pagination and scroll arrows.
Dots pagination
Dots pagination is commonly used to showcase how many scrollable elements are available in a collection. For dots pagination, variants featuring 2 to 8 dots exist. No more than 8 dots are allowed for this type of pagination.
Scroll arrows
Components using dots pagination can be accompanied by scroll indicators to facilitate navigation through the content. In particular:
- devices > 767 px: the indicator will be both dots and scroll arrows.
- devices < 767 px: the indicator will be dots only.
There are three types of scroll arrows:
Sizes
Both dots pagination and scroll arrows come in one size only. Scroll arrows distance can be easily readjusted to fit the width of any carousel content type.
Styling
Carousel is available for both dark and light theme.
Dots pagination
By default, dots pagination comes with one dot being marked as the active page. The previous and next buttons are optional to display.
Scroll arrows
Behavior
Positioning
- Pagination is always placed at the bottom of the frame or container it is linked to, and it is positioned in the same place on each frame.
- Scroll arrows are usually plced at the sides of the carousel content.
You can typically find carousels in:
- Cards collections
- Stages
- Modals
- Image galleries
Alignment
For tablets and desktop viewports, dot pagination is typically center aligned, but can be left-aligned in components such Stage carousels.
Interaction
Devices > 767 px
- **Default view**
- The default view is on the first item, thus the left-most dot is active. Note: depending on the use case, you might want to allow users to go from the first item to the last when navigating backwrds and from the last to the first item when navigating forward. If that's not the case, you can display one arrow or the other in disabled state.
- **Navigation**
- Navigation happens through the scroll arrows. In addition to this, pagination dots are clickable, so users can navigate to a specific piece of content. When showing a subsequent piece of content, updte the style of the dot corresponding to the current frame from Inactive to Active.
Devices < 767 px
- **Navigation**
- In smaller viewports scroll arrows are not displayed. Navigation happens through swipe (left or right) or, optionally, by tapping on any of the pagination dots.
Usage example
Note: Image gallery features a numerical pagination (1/10) rather than dots pagination.
Accessibility guidelines
Design considerations
Content
- Keep in mind that when using a carousel many users may not interact with it beyond the first slide, meaning that some content may go unnoticed.
- To avoid overwhelming users, especially the ones with cognitive impairments, keep the content concise to only a few slides.
Autoplay
- Avoid autoplay as every user takes a different time to read a piece of content. Furthermore, carousels can be confusing for users of screen readers.
Color contrast
- Make sure there is enough contrast between the carousel elements and the background color.