Carousel Preview
A carousel is a dynamic component that lets users cycle through content, like featured articles, products, or services, without leaving the current page. It can be used on a page, within an app, in a drawer, or in a modal to display items such as people, cards, dates, and images. Unlike modals, carousel navigation is independent of the rest of the page, providing a self-contained experience.
Resources
Behavior
Carousels have a few noteworthy behaviors: clickable actions and auto-play.
Clickable actions
If there are clickable actions within the content area, the user may opt into interacting with it.
Auto-play
If the carousel is on auto-play, the user must always have the option of pausing the auto-play feature.
Navigation
The carousel supports two distinct navigation options: Steps and Image preview.
Steps
Setting the Nav Type to Steps displays the chevrons and step element.
Image gallery
Setting the Nav Type to Image Gallery replaces the steps with image thumbnails.
Layout
The carousel is a versatile component that can showcase a variety of elements, such as images, applications, or other content, providing designers with the flexibility to curate collections that offer users access to contextually relevant materials in unique combinations.
Card layout
Use card-style carousels to showcase individual items like products, team members, or testimonials. Each card can contain a mix of images, text, and buttons.
Web banner layout
The web banner is ideal for highlighting promotions, announcements, or featured content. These banners typically span the full width of the screen and rotate through images or messages.
Image gallery layout
Use the image gallery layout for displaying a collection of images or videos. This type of carousel allows users to browse through visual content seamlessly.
Accessibility
Carousels must reflow to accommodate the 400% zoom WCAG criteria. This means at when the window is 600 pixels wide and under the Carousel will snap to full screen. The content should be responsive and “shrink” to fit within the 600 to 320 window width. The image or video content keeps the aspect ration while flexing to window width.
