菜单
Use when you need to display multiple items in a rotating view.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
| 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