Menu
Use when you need to display multiple items in a rotating view.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | carousel |
| description | Use when you need to display multiple items in a rotating view. |
| metadata | {"id":"carousel","category":"content-management","pattern":"Carousel","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/content-management/carousel","sourcePath":"apps/web/content/patterns/content-management/carousel.mdx"} |
Display multiple items in a rotating view
A carousel displays content or images in a rotating or sliding manner. Users navigate through content with arrows, dots, or swipe gestures on touch devices. Carousels showcase featured content, promotions, or image galleries in limited space.
Use carousels to display related content or images in limited space while keeping users engaged. Common use cases include:
references/pattern.md, then choose the smallest viable variation.When to use a tabbed carousel vs grouped carousel? Use a Tabbed Carousel When:
Target performance metrics for carousels:
The Problem: Users might not have enough time to read or interact with content, and constantly rotating slides can disorient or frustrate them—especially those using assistive technologies.
How to Fix It? Always provide pause/play controls. Respect prefers-reduced-motion by disabling or slowing auto-rotation for users who prefer less animation.
The Problem: Carousels often exclude users who rely on keyboard navigation or expect swipe gestures on mobile devices.
How to Fix It? Ensure you can navigate slides via Tab and arrow keys. Add swipe or drag support for mobile. Test thoroughly across various devices and accessibility tools.
The Problem: Many users never click past the first slide, missing crucial information if it’s hidden further down the carousel.
How to Fix It? Place the most essential content in the first slide. If the content is critical, consider using a static layout or highlight it differently so users don’t need to scroll or click.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/content-management/carousel
Use when implementing help users understand their current location.
Use when implementing expand and collapse content sections.
Use when implementing user account configuration and preferences.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.