carousel
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseComponents: Carousel Layout
组件：Carousel布局
Guides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
用于指导顺序内容展示的Carousel（Slider）布局设计。Carousel一次展示一个或少量条目，用户可滑动或点击切换内容，最适合空间有限且需要轮播展示多条目的场景：用户评价、引言、品牌logo、画廊精选内容。
调用规则：首次使用时如果合适，可以先用1-2句话说明该技能覆盖的范围及价值，再提供核心输出。后续调用或者用户要求跳过介绍时，直接输出核心内容即可。
When to Use Carousel
何时使用Carousel
| Use carousel when | Use grid/list when |
|---|---|
| Limited space | Full catalog visible |
| One focus at a time; rotation desired | Browse, compare many items |
| Testimonials, quotes, logos, featured gallery | Products, templates, blog index |
| Above fold; hero or section highlight | Full listing; discovery |
See grid for equal-hierarchy display; list for text-heavy scan; masonry for varying-height gallery.
| 适合使用Carousel的场景 | 适合使用网格/列表的场景 |
|---|---|
| 空间有限 | 需要完整展示目录 |
| 同一时间仅需一个焦点内容，希望内容轮播展示 | 需要浏览、对比大量条目 |
| 用户评价、引言、品牌logo、精选画廊 | 产品、模板、博客索引 |
| 首屏位置；英雄区或板块亮点区域 | 完整列表；内容探索场景 |
同等层级内容展示可参考 grid；文本密集型快速浏览可参考 list；高度不统一的画廊可参考 masonry。
Carousel vs Grid vs List vs Masonry
Carousel vs Grid vs List vs Masonry
| Layout | Structure | Best for |
|---|---|---|
| Grid | Equal rows and columns; all visible | Products, templates, features |
| List | Single column; stacked | Blog index, docs, search results |
| Masonry | Columns; varying heights | Pinterest-style gallery |
| Carousel | Slides; one/few visible; swipe/click | Testimonials, logos, featured items |
| 布局 | 结构 | 最佳适用场景 |
|---|---|---|
| Grid | 均等行列布局；所有内容均可见 | 产品、模板、功能点 |
| List | 单列布局；内容堆叠 | 博客索引、文档、搜索结果 |
| Masonry | 多列布局；高度不统一 | Pinterest风格画廊 |
| Carousel | 幻灯片形式；仅展示1个/少量内容；支持滑动/点击切换 | 用户评价、品牌logo、精选内容 |
Best Practices
最佳实践
Accessibility
可访问性
- Keyboard navigation: Arrow keys to move; Enter/Space to activate; focus visible
- User control: Don't auto-advance too fast; allow pause; avoid auto-advance if is set
prefers-reduced-motion - Announcements: Screen reader users need to know current slide and total (e.g., "Slide 2 of 5")
- Touch targets: ≥44×44px for prev/next buttons on mobile
- 键盘导航：支持方向键切换；Enter/Space键触发操作；焦点状态可见
- 用户控制权：不要设置过快的自动轮播速度；支持暂停功能；如果用户设置了，避免自动轮播
prefers-reduced-motion - 内容播报：屏幕阅读器用户需要获知当前幻灯片序号和总数量（例如："Slide 2 of 5"）
- 触控目标：移动端上一页/下一页按钮的触控尺寸≥44×44px
Performance
性能
- Lazy load: Load off-screen slides on demand; avoid loading all images upfront
- Reserve space: Reserve space for slides to avoid layout shift (CLS)
- 懒加载：按需加载屏幕外的幻灯片；避免预先加载所有图片
- 预留空间：提前为幻灯片预留展示空间，避免布局偏移（CLS）
SEO
SEO
- Content in DOM: All carousel content must be in the initial HTML at page load. Google does not simulate clicks; content loaded via AJAX on slide change is not discoverable. Same applies as tab-accordion.
- Recommendation: Server-render all slides in HTML; use CSS/JS only to show/hide.
- Content in DOM：所有Carousel内容必须在页面加载时就存在于初始HTML中。Google不会模拟用户点击操作，幻灯片切换时通过AJAX加载的内容无法被搜索引擎抓取，该规则和 tab-accordion 一致。
- 建议：服务端渲染所有幻灯片到HTML中；仅通过CSS/JS控制内容的显示/隐藏。
Use Cases
适用场景
| Use case | Format | Page Skill |
|---|---|---|
| Testimonials | Quote carousel; multiple testimonials | testimonials-generator |
| Showcase / Gallery | Featured items; rotation | showcase-page-generator |
| Press logos | "As Seen In" logo strip or quote carousel | press-coverage-page-generator |
| Community | Banner carousel below hero | community-forum |
| 场景 | 格式 | 关联页面技能 |
|---|---|---|
| 用户评价 | 引言轮播；多条用户评价 | testimonials-generator |
| 展示/画廊 | 精选内容；轮播展示 | showcase-page-generator |
| 媒体报道品牌logo | "As Seen In" logo栏或者引言轮播 | press-coverage-page-generator |
| 社区 | 英雄区下方的横幅轮播 | community-forum |
Related Skills
相关技能
- grid: Grid for full catalog; when carousel is too restrictive
- list: List for text-heavy scan
- masonry: Masonry for varying-height gallery
- card: Card structure within carousel slides
- testimonials-generator: Testimonial carousel; testimonials as content
- showcase-page-generator: Gallery format options (grid, masonry, carousel)
- tab-accordion: Similar SEO requirement—content in DOM at load
- grid：适用于完整目录展示的网格布局；可用于Carousel限制过多的场景
- list：适用于文本密集型快速浏览的列表布局
- masonry：适用于高度不统一画廊的瀑布流布局
- card：Carousel幻灯片内的卡片结构
- testimonials-generator：用户评价轮播；生成用户评价内容
- showcase-page-generator：画廊格式可选方案（网格、瀑布流、Carousel）
- tab-accordion：和Carousel有相同的SEO要求——加载时内容就存在于DOM中