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 navi...