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.

Loading...

Resources


Behavior

Auto-play control

If the carousel is set to auto-play, provide users with an option to pause the feature to prevent distraction or sensory overload.

Auto-play control

Layout

The layout of a carousel can vary depending on its application.

Cards layout
Web banner layout
Image gallery layout

Accessibility

400% zoom and small viewports