> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Carousel

Embla-style carousel for screenshots, product tours, quotes, and gallery cards with optional autoplay.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Carousel playground on holydocs.com](https://holydocs.com/components/carousel).

## When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Product Tour

Three-slide screenshot carousel with captions.

**Landing page**

![HolyDocs landing page screenshot](https://cdn.screenframed.com/r/ren_01KP63F5MD99TKH0DQZQRH30JQ.png)
  **Device mockup**

![HolyDocs screenshot inside a device frame](https://cdn.screenframed.com/r/ren_01KP61F5YWDVB3FV83N7PS41P0.png)
  **AI composition**

![HolyDocs screenshot with AI composition](https://cdn.screenframed.com/r/ren_01KP61GS6GTFAX7P2QGZ4R6K2G.png)

~~~mdx
<Carousel autoplay interval={4200}>
  <CarouselItem title="Landing page" caption="Hero content, search, and project setup in a single pass.">
    <img src="https://cdn.screenframed.com/r/ren_01KP63F5MD99TKH0DQZQRH30JQ.png" alt="HolyDocs landing page screenshot" width="1440" height="900" loading="lazy" />
  </CarouselItem>
  <CarouselItem title="Device mockup" caption="Marketing-friendly framing for release notes and launch content.">
    <img src="https://cdn.screenframed.com/r/ren_01KP61F5YWDVB3FV83N7PS41P0.png" alt="HolyDocs screenshot inside a device frame" width="1200" height="900" loading="lazy" />
  </CarouselItem>
  <CarouselItem title="AI composition" caption="Automated screenshot treatments for docs and changelog announcements.">
    <img src="https://cdn.screenframed.com/r/ren_01KP61GS6GTFAX7P2QGZ4R6K2G.png" alt="HolyDocs screenshot with AI composition" width="1200" height="675" loading="lazy" />
  </CarouselItem>
</Carousel>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `autoplay` | `boolean` | `false` | Automatically advances through slides. |
| `interval` | `number` | `4500` | Autoplay interval in milliseconds. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Carousel autoplay interval={4200}>
  <CarouselItem title="Landing page" caption="Hero content, search, and project setup in a single pass.">
    <img src="https://cdn.screenframed.com/r/ren_01KP63F5MD99TKH0DQZQRH30JQ.png" alt="HolyDocs landing page screenshot" width="1440" height="900" loading="lazy" />
  </CarouselItem>
  <CarouselItem title="Device mockup" caption="Marketing-friendly framing for release notes and launch content.">
    <img src="https://cdn.screenframed.com/r/ren_01KP61F5YWDVB3FV83N7PS41P0.png" alt="HolyDocs screenshot inside a device frame" width="1200" height="900" loading="lazy" />
  </CarouselItem>
  <CarouselItem title="AI composition" caption="Automated screenshot treatments for docs and changelog announcements.">
    <img src="https://cdn.screenframed.com/r/ren_01KP61GS6GTFAX7P2QGZ4R6K2G.png" alt="HolyDocs screenshot with AI composition" width="1200" height="675" loading="lazy" />
  </CarouselItem>
</Carousel>
~~~

## Tips

- Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
- Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
- Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.

## Related Components

**[Color](/components/color)**

Visual color swatch with hex value and optional name, useful for design system documentation.
**[Form](/components/form)**

Embeddable forms that collect user input and send it via email.
**[Prompt](/components/prompt)**

Display pre-built AI prompts with a one-click copy button for easy reuse.

## More

- Interactive playground: [Carousel on holydocs.com](https://holydocs.com/components/carousel)
- Component library index: [/components](/components)