carousel

# 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