Carousel

🧭 When to Use a Carousel

Use a Carousel when:

• You need to show a collection of related items in a limited horizontal space

• You want to allow exploration without overwhelming the layout

• You're previewing a set of features, media, or related cards

Avoid using Carousels for critical actions or content that must always be seen—users may skip or miss items if they don't realize there's more.

🧩 Carousel Items

Each Carousel is made up of one or more Carousel Items, which can include:

• Images

• Cards

• Product previews

• Informational content or quick actions

These items can be dynamic in width (e.g. auto-fit cards) or fixed (e.g. uniform image thumbnails).

Carousel Items are passive — they don't scroll themselves, but move based on interaction with controls or a scrollbar.

🧭 Directional Controls

The Carousel includes two directional controls:

• Forward – Advances the carousel to the next item(s)

• Backward – Scrolls back to previous item(s)

These controls appear as arrows and are placed at the left and right edges of the Carousel. Each control supports:

🎯 Statuses for Arrows

• Default – Idle, clickable arrow

• Hover – Slight visual cue (e.g. darker background or outline)

• Focus – Keyboard navigation-ready with a visible outline or highlight

• Disabled – Arrow is inactive (e.g. at start or end of the carousel)

🎨 Types

• Transparent – Minimal, icon-only control without a background

• Default – Solid or semi-transparent background for stronger visibility (ideal over image content)

These controls can be toggled via variants or swapped with different icons.

📏 Scrollbar

The Carousel includes a horizontal scrollbar, allowing users to drag or click to scroll through content manually. The scrollbar appears below the Carousel track.

🎯 Scrollbar States

• Default – Visible track with a draggable thumb

• Hover – Thumb and track highlight to signal interactivity

• Focus – Thumb shows a strong visual indicator for keyboard or assistive navigation

The scrollbar is optional and can be hidden on mobile or auto-hidden based on system settings.

🔁 Carousel (Carousel + Controls + Scrollbar)

The Carousel is the complete, interactive pattern composed of:

• A scrollable container holding Carousel Items

• Left/right directional controls

• A scrollbar (optional or persistent)

All elements work together to provide:

• Scroll feedback

• Clear entry and exit points

• Touch, keyboard, and mouse support (if implemented)

You can use additional Figma variants to toggle between:

• Scroll-only

• Scroll + arrows

• Scroll + arrows + scrollbar

• Static (non-interactive) presentation mode

♿ Accessibility Considerations

From a design perspective:

• Ensure all items have enough contrast and are large enough to tap/click

• Arrows and scrollbars should be keyboard-accessible with strong focus states

• Use clear indicators when a Carousel has more content (e.g. partially visible edge items or arrow hinting)

From a code perspective (if implemented):

• Use aria-roledescription="carousel" on the container

• Include aria-label or aria-labelledby for context

• Arrow buttons should include descriptive labels like “Scroll forward” or “Scroll back”

• If auto-scrolling is used, it must pause on hover and support manual controls

✅ Best Practices

• Don’t auto-scroll unless there’s strong UX reasoning

• Keep scroll length manageable (3–5 items visible at a time)

• Use partially visible items or subtle peeking to indicate more content

• Ensure accessibility across touch, mouse, and keyboard users