---
url: /components/carousel.md
---
# Carousel 轮播

`EvCarousel` 提供轻量的轮播能力：平滑位移、左右箭头、胶囊圆点，`autoplay` 开启自动轮播且
hover 暂停。三种形态：`default` 由 `#item` 作用域插槽完全自定义、`image` 纯图片轮播、
`banner` 图片 + 文字注释（渐变遮罩贴底）。

## 基础用法

\<EvCarousel
:items="\[
{ quote: '同步速度和离线体验是我们团队迁移的全部理由。', author: '林一舟', role: '产品负责人' },
{ quote: '搜索快到离谱，找三年前的会议记录也就一两秒。', author: 'Ada', role: '项目经理' },
{ quote: '界面安静克制，写东西的时候不会被任何元素打扰。', author: 'Wen', role: '专栏作者' },
]"
style="max-width:560px; margin-inline:auto;"

>

\<template #item="{ item }">




```vue
<EvCarousel :items="quotes" :autoplay="5000">
  <template #item="{ item }">
    <EvQuote v-bind="item" sticker />
  </template>
</EvCarousel>
```

## 纯图片轮播

```vue
<EvCarousel variant="image" aspect="16 / 7" :autoplay="4000" :items="photos" />
```

## 图片 + 文字注释

```vue
<EvCarousel
  variant="banner"
  aspect="16 / 7"
  :items="[{ src: '/images/a.jpg', title: '为团队而建的工作台', desc: '把日常协作收进同一个界面' }]"
/>
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| items | 轮播数据（长度即页数） | array | `[]` |
| variant | 形态：`'default'` 自定义插槽 / `'image'` 纯图片 / `'banner'` 图片+注释 | string | `'default'` |
| aspect | image / banner 形态的画幅比例（CSS aspect-ratio 值） | string | `'16 / 9'` |
| autoplay | 自动轮播间隔 ms（0 关闭，hover 暂停） | number | `0` |
| dots | 展示圆点指示器 | boolean | `true` |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| item | 每页内容（作用域：`{ item, index }`），仅 default 形态 |