# Carousel (/docs/products/dash-dots/reference/components/carousel)

Put one child in it for each slide, such as an `Image` or a card.

**Children:** Components

## Example

![The Carousel component](/assets/images/dash-dots/components/carousel.webp)

```xml title="view.dml"
<Carousel indicator="dots" gap="small">
  <Image src="statics/photo.jpg" alt="First slide" aspect="16:9" fit="cover" shape="rounded" />
  <Image src="statics/photo.jpg" alt="Second slide" aspect="16:9" fit="cover" shape="rounded" />
</Carousel>
```

## Props

| Prop                                                                   | Type                                                             | What it is                                                                                                   |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `autoplay`                                                             | `boolean`                                                        | Moves to the next slide every `interval` milliseconds, pausing while touched. Default: `false`.              |
| `interval`                                                             | `number`                                                         | In milliseconds. Default: `4000`.                                                                            |
| `loop`                                                                 | `boolean`                                                        | After the last slide comes the first again. Default: `false`.                                                |
| `indicator`                                                            | `dots`, `none`                                                   | Default: `dots`.                                                                                             |
| `gap`                                                                  | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space between slides, seen while one slides in. Default: `none`.                                             |
| `effect`                                                               | `slide`, `scale`                                                 | `scale` shrinks a slide as it leaves the middle and grows the one coming in, as you swipe. Default: `slide`. |
| `index`                                                                | `number`                                                         | The slide to show. Changing it moves the carousel there.                                                     |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side.                                                            |

## Events

| Event      | Sends                   | Notes                  |
| ---------- | ----------------------- | ---------------------- |
| `onChange` | `{ index }` in `detail` | The slide now showing. |