---
title: "Carousel"
description: "Horizontal strip of cards with arrows; nav adds page indicators."
---

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

# Carousel

```gistui
root = Carousel(Media("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=900&q=75&auto=format&fit=crop", title:"Tokyo", subtitle:"Japan's capital", v:overlay), Media("https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=900&q=75&auto=format&fit=crop", title:"Mount Fuji", subtitle:"Sacred peak", v:overlay), Media("https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=900&q=75&auto=format&fit=crop", title:"Kyoto", subtitle:"Temples and shrines", v:overlay), Media("https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=900&q=75&auto=format&fit=crop", title:"Sushi", subtitle:"Tsukiji market", v:overlay), per:3, nav:dots)
```

## Signature

This is the line a model reads in the system prompt.

```gistui
Carousel(...children, per:num, nav:none|dots|bars|count, arrows:always|hover|none, autoplay:num)
```

- **Group:** Layout
- **Children:** Yes: any component or text
- **Positional arguments:** none

## Props

| Prop | Type | How to write it | Notes |
|---|---|---|---|
| `per` | number | named: `per:…` | items visible at once |
| `nav` | `none` · `dots` · `bars` · `count` | named: `nav:…` | Default `"none"`. |
| `arrows` | `always` · `hover` · `none` | named: `arrows:…` | Default `"always"`. |
| `autoplay` | number | named: `autoplay:…` | seconds per page |

## Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model's output do not change.

### React

```tsx
import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Carousel: MyCarousel });
<GistUI library={lib} stream={response.body} />;
```
### Vue

```vue
<GistUI :source="answer" :components="{ Carousel: MyCarousel }" />
```
### Svelte

```svelte
<GistUI source={answer} components={{ Carousel: MyCarousel }} />
```
### Solid

```tsx
<GistUI source={answer()} components={{ Carousel: MyCarousel }} />
```
### Vanilla

```ts
import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Carousel: (ctx) => ({ el: myElement(ctx) }) });
```

See [Custom components](/docs/guides/custom-components/) for the full contract. Style hook: `[data-gistui="Carousel"]`.

Source: https://gistui.com/docs/components/layout/carousel/index.mdx