/carousel

name: carousel
description: When the user wants to design, optimize, or audit carousel/slider layouts for content display. Also use when the user mentions "carousel," "slider," "carousel layout," "testimonial carousel," "gallery carousel," "quote carousel," "image slider," or "carousel accessibility." For hero-area patterns, use hero-generator.
metadata:
  version: 1.1.0

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