A carousel enables a user to cycle through a queue of related images, cards or other items. The experience is generally more consumable and engaging, and less intimidating, because only one item from the set is in view at a time.
Banner carousels are used for displaying a collection of banners or images one at a time through either auto-rotation or user interaction. The order of items should be based on priority, with the most important item in position one or two.
See the Banners page for more information about banner creation.
Used for a collection of content with varying dimensions, such as multiple product stacks or cards.
Several items are shown at once on larger breakpoints.
UX best practices still recommend a maximum of 8 items in the collection because users generally don't consider options sets larger than this.
If there are more than 8 items in the carousel, display text above the carousel (right-aligned) that indicates the visible set in relation to the total number in the collection (e.g. "Viewing 5-8 of 12").
Swipe to the left across the carousel content in order to cycle to the next item/set, and swipe to the right to cycle to the previous item/set.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for carousels from WAI-ARIA authoring practices 1.1.
You may refer to this example of an auto-rotating image carousel from WAI-ARIA practices 1.1.
You may also refer to these tutorials for carousels from Web Accessibility Tutorials.