Carousel | Magoo

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to present a sequence of content in the same space with clear controls.

What to draw

Show the current slide, previous and next controls, and indicators when used. If rotation is automatic, show a pause control.

How it behaves

Controls change the slide without unexpectedly moving focus. Automatic rotation pauses when the carousel receives focus.

What to document in Figma

Record rotation, pausing, control names, and how the current slide is communicated. Gestures and arrows may supplement the controls.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Carousel.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you visually tell that this is a group of related content?
Before interacting, can you identify which item or slide is active?
Before interacting, can you perceive the item count or current position within the sequence?
With automatic rotation, can you tell whether the carousel is playing or paused?
Are next, previous, item selection, and pause controls available without relying solely on gestures or animations?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over buttons, indicators, and pause controls?
Is there visual feedback when clicking actionable controls?
Does clicking previous or next display the corresponding slide and update the active indicator?
Does clicking an indicator display the slide associated with that control?
With automatic rotation, does hovering over the carousel pause slide changes?

Designing for gesture use

Do controls have enough area for comfortable touch?
When swipe gestures are provided, do they supplement visible controls?
Does swiping update the active slide and its visual indicator?
Can the carousel be operated without relying exclusively on precise or complex movements?

Designing for keyboard use (any non-pointing device)

Is there visual feedback when focusing each actionable control?
Can you navigate between actionable controls using TAB and SHIFT+TAB?
Can you activate buttons and indicators with ENTER and SPACE?
When changing slides, does focus remain in a predictable position?
When focus enters the carousel, is automatic rotation paused?

Designing for screen reader use

When navigating landmarks or regions, can you identify the carousel by a clear accessible name?
When focusing an actionable control, can you hear its name, role, and state?
When focusing indicators, can you identify which slide will be displayed and which is selected?
Is the active slide's position, such as "2 of 5", communicated when helpful for orientation?
Are automatic updates paused or announced in a controlled way to avoid interrupting reading?

Interaction methods

Possible interaction methods for components of type Carousel.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

On hover, each actionable control should provide visual feedback confirming that interaction is possible.
Clicking next should display the next slide.
Clicking previous should display the previous slide.
Clicking an indicator should display the corresponding slide.
Clicking the pause control should stop automatic rotation.

Keyboard interaction (any non-pointing device)

When focused with the keyboard, each actionable control should provide visual feedback with a visible focus indicator.
It should be possible to navigate to the next or previous item using the TAB or SHIFT+TAB keys respectively.
Control buttons should be activated with the ENTER and SPACE.
arrow keys may be supplementary interactions, provided they are not the only method and do not conflict with expected patterns.
On receiving focus, an automatically rotating carousel should pause slide changes.

Keyboard (or gesture) interaction + screen reader

On reaching the carousel, you can identify its accessible name and purpose.
When focusing previous, next, pause, or indicator controls, their names should describe the action performed.
The active slide and its position in the set should be perceptible when needed for orientation.
Changing slides should not move focus unexpectedly.
On mobile devices, controls must be reachable through screen reader gestures and activatable by double-tap.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing a carousel

Keyboard navigation

WHEN I use the Tab key to move focus to the carousel controls
The focus I SEE is strongly indicated visually
THEN, when I use the Enter or Space keys to activate a control
I SEE the corresponding slide displayed
AND I SEE the current slide indicator updated
AND focus remains in a predictable position

Automatic rotation

WHEN the carousel has automatic rotation
I SEE a control to pause, stop, or control the animation
THEN, when focus enters the carousel or the mouse hovers over it
I SEE automatic rotation paused
AND, when I activate the pause control, automatic slide changes stop

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and navigate to the carousel, the following happens:
- I HEAR the accessible name of the carousel or its containing region.
- I HEAR each control's name, such as previous slide, next slide, pause carousel, or select slide.
- I HEAR the current slide's state or position when needed for orientation.
THEN, when I activate a carousel control
I HEAR or perceive that the slide updated without repetitive announcements or excessive interruptions.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to navigate the carousel, the following happens:
- I HEAR the accessible name of the carousel or its containing region.
- I HEAR controls and indicators in a logical order.
- I HEAR names that make each control's action clear.
THEN, when I double-tap to activate a control
I HEAR or perceive that the corresponding slide was displayed without losing context.

Considerations

If there is automatic rotation, there must be a clear way to pause, stop, or control the animation.
The carousel should pause when it receives keyboard focus or the mouse hovers over it.
Important content should not exist only in slides that disappear automatically.
Animations should respect reduced motion preferences.
Visual indicators, such as dots, need accessible names and a perceptible active state.
Use carousels thoughtfully, as they add navigation complexity and can hide content.

References

Additional references for components of type Carousel.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.

Design patterns

Design System

Bootstrap - Carousel external link - opens in a new window (opens in a new tab)