Components: Carousel Layout
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.
When to Use 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 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 |
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
prefers-reduced-motion is set - 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
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)
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 as tab-accordion.
- Recommendation: Server-render all slides in HTML; use CSS/JS only to show/hide. See rendering-strategies.
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 |
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
- rendering-strategies: SSR, SSG; content in initial HTML for crawlers
组件:轮播布局
指导轮播(滑动器)布局设计,用于顺序内容展示。轮播每次显示一个或少数几个项目;用户通过滑动或点击进行切换。最适合空间有限且需要轮换多个项目的情况——如用户评价、引文、品牌标志、精选图库。
调用时:在首次使用时,如有帮助,可用1-2句话说明该技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接进入主要输出。
何时使用轮播
| 使用轮播的场景 | 使用网格/列表的场景 |
|---|
| 空间有限 | 完整目录可见 |
| 一次聚焦一个内容;需要轮换 |
浏览、比较多个项目 |
| 用户评价、引文、品牌标志、精选图库 | 产品、模板、博客索引 |
| 首屏上方;主视觉或区域亮点 | 完整列表;发现浏览 |
参见网格用于同级层次展示;列表用于文本密集型浏览;瀑布流用于高度不一的图库。
轮播 vs 网格 vs 列表 vs 瀑布流
| 布局 | 结构 | 最佳用途 |
|---|
| 网格 | 等行等列;全部可见 | 产品、模板、功能 |
| 列表 |
单列;堆叠排列 | 博客索引、文档、搜索结果 |
|
瀑布流 | 多列;高度不一 | Pinterest风格图库 |
|
轮播 | 幻灯片;一个/少数可见;滑动/点击 | 用户评价、品牌标志、精选项目 |
最佳实践
无障碍性
- - 键盘导航:方向键移动;回车/空格激活;焦点可见
- 用户控制:不要过快自动播放;允许暂停;如果设置了prefers-reduced-motion,避免自动播放
- 语音播报:屏幕阅读器用户需要知道当前幻灯片和总数(例如第2张,共5张)
- 触摸目标:移动端上一页/下一页按钮≥44×44像素
性能
- - 懒加载:按需加载屏幕外的幻灯片;避免一次性加载所有图片
- 预留空间:为幻灯片预留空间以避免布局偏移(CLS)
SEO
- - DOM中的内容:所有轮播内容必须在页面加载时的初始HTML中。谷歌不会模拟点击;通过AJAX在幻灯片切换时加载的内容不可被发现。与标签-手风琴相同。
- 建议:在HTML中服务端渲染所有幻灯片;仅使用CSS/JS进行显示/隐藏。参见渲染策略。
使用场景
| 使用场景 | 格式 | 页面技能 |
|---|
| 用户评价 | 引文轮播;多条用户评价 | 用户评价生成器 |
| 展示/图库 |
精选项目;轮换展示 |
展示页面生成器 |
|
媒体报道标志 | 媒体报道标志条或引文轮播 |
媒体报道页面生成器 |
|
社区 | 首屏下方横幅轮播 |
社区论坛 |
相关技能
- - 网格:用于完整目录的网格布局;当轮播过于局限时使用
- 列表:用于文本密集型浏览的列表布局
- 瀑布流:用于高度不一图库的瀑布流布局
- 卡片:轮播幻灯片中的卡片结构
- 用户评价生成器:用户评价轮播;以用户评价为内容
- 展示页面生成器:图库格式选项(网格、瀑布流、轮播)
- 标签-手风琴:类似的SEO要求——加载时内容在DOM中
- 渲染策略:SSR、SSG;爬虫可访问的初始HTML内容