When to use
Carousels enable users to navigate through horizontally aligned content items. They can help reduce cognitive load by displaying only a limited number of items at a time. By swiping or using the navigation controls, the user can view the previous or next items in the carousel.
Since a carousel always hides some items, carefully consider the context before using one. Essential information should always be easy to access and would not qualify as carousel content.
Behaviour
A carousel scrolls one content item at a time — either to the left (next item) or to the right (previous item). The user can browse through the carousel content by using the navigational controls or by swiping left or right.
Placement
A carousel needs (horizontal) space and should generally occupy the full width of the container to provide the best experience. Therefore, prevent placing other content or component next to a carousel. For assistance please reach out to the Aero team.
Alignment
A carousel always applies horizontal alignment to individual content items. Typically, these items are cards, either with images or text, and can be interactive or static. All items should have a consistent height to prevent content jumps and provide the best experience for our users. See the demo via the Web tab.
Accessibility considerations
Action buttons should be provided to ensure that there is a single-point activation in place, these benefit not only some people with upper body mobility impairments, but also people who use voice as their input mechanism.
The slide information, and controls, also need the be announced to screen readers. Label buttons in a way that includes a wide variety of users, often “Previous” and “Next” are enough. In cases where multiple carousels are present, more context will be needed.
Do not automate carousels. Doing so, will introduce barriers to a wide range of users.