Carousel

Resources

Properties

Best practises

• Use carousels to display multiple content items in a compact form.
• Avoid placing critical information solely in carousels.
• Provide clear navigation controls (arrows, indicators) and enable keyboard navigation.

When to use

When displaying a collection of images, cards or content that users can browse.
When presenting multiple pieces of content within a confined.
When emphasizing visuals, like product images, to create an interactive experience.

If the content is important, don’t hide it behind a carousel that users may overlook.
If users need to compare multiple items simultaneously, use list instead.
If users need to navigate quickly or find something specific, static layout is usually better than a carousel.

Behaviour

Carousels display content items sequentially and typically allowing users to navigate through them one by one. They are used to showcase multiple pieces of content in a compact form. Carousels can be set to:

• Manual Progression: Users navigate through slides using controls (arrows, indicators, swipe/drag).
• Auto-Play: Slides advance automatically after a set interval. If auto-play is used, provide controls for users to pause/play.
• Looping: Content can cycle back to the beginning after the last item or stop at the first/last slide.

Size

Carousel size is responsive, it adapts to the available screen space and the content it displays. The carousel items should maintain a consistent aspect ratio to prevent layout shifts. On smaller screens, the carousel should adjust to show fewer items or a single item at a time.