# Carousel

## Demos

### Switching items

Use the `index` to control the current item to be displayed.

[[ demo src="/demo/carousel/switch.vue" ]]

### Indicator type

Use the [`indicator`](#props-indicator) prop to specify the type of step indicators.

[[ demo src="/demo/carousel/indicator.vue" ]]

### Autoplay

Use the [`autoplay`](#props-autoplay) prop to enable autoplay.

[[ demo src="/demo/carousel/autoplay.vue" ]]

## API

### Props

| Name | Type | Default | Description |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``indicator`` | `string=` | `'radio'` | [^indicator] |
| ``switch-trigger`` | `string=` | `'click'` | [^switch-trigger] |
| ``autoplay`` | `boolean=` | `false` | Whether to autoplay the carousel. |
| ``pause-on-hover`` | `boolean=` | `false` | Whether to pause the cycling on hover when autoplaying. |
| ``interval`` | `number=` | `3000` | The amount of time to delay between automatically cycling an item. |
| ``wrap`` | `boolean=` | `false` | Whether the carousel should cycle continuously or have hard stops. |

^^^datasource
The media datasource for the carousel, with the item type being `{src, alt, label}`.

+++Properties
| Name | Type | Description |
| -- | -- | -- |
| `src` | `string` | The source of the image. |
| `alt` | `string` | The alternate text of the image. |
| `label` | `string` | Descriptive title of the image. |
+++
^^^

^^^index
:::badges
`.sync`
:::

The index of the current image within the datasource.
^^^

^^^indicator
The way the indicator is displayed.

+++Enum values
| Value | Description |
| -- | -- |
| `radio` | As radio buttons. |
| `number` | As numeric value in the form of *current item / total items*. |
| `none` | Not displayed. |
^^^

^^^switch-trigger
The behavior triggers item switch when radio indicator is displayed.

+++Enum values
| Value | Description |
| -- | -- |
| `click` | Switched on click. |
| `hover` | Switched on hover. |
+++
^^^

### Slots

| Name | Description |
| -- | -- |
| ``item`` | [^slot-item] |

^^^slot-item
The content of each carousel item. Displays the corresponding image by default.

The slot props are the same as each item inside `datasource` (including custom properties), with an extra `index: number`, which denotes the index within the datasource. i.e. The `slot-scope` is in the form of `{src, alt, label, index, ...}`.
^^^

### Events

| Name | Description |
| -- | -- |
| ``change`` | [^event-change] |

^^^event-change
Triggered the current item changed. The callback argument list is `(to: number, from: number)`. `to` and `from` denote the new index and the old index respectively.
^^^

### Icons

| Name | Description |
| -- | -- |
| ``prev`` | Previous item. |
| ``next`` | Next item. |