---
title: Carousel
subtitle: 轮播
path: component/swiper
group: 信息展示
---

## Carousel 轮播

**原 Swiper**，以幻灯片的方式在页面中横向展示诸多内容的组件，轮播内容互相独立。

### 建议

- 在固定区域内展示一组平级内容时使用，常见内容为图片、视频和文本等；
- 轮播为左右水平方向进行切换；
- 默认开启自动播放，且保持循环轮播；

### 注意

- 当轮播内容为单个时，不允许展示指示器与切换箭头；

### API

**`children` 中的元素必须支持透传 `style` 到原生节点上，否则样式会失效。**

| 参数               | 说明                                 | 类型                                                   | 默认值     | 备选值                                                     |
| ------------------ | ------------------------------------ | ------------------------------------------------------ | ---------- | ---------------------------------------------------------- |
| transitionDuration | 切换动画持续时间(ms)                 | number                                                 | `300`      |                                                            |
| autoplay           | 是否自动切换                         | bool                                                   | `false`    | `false`, `true`                                            |
| autoplayInterval   | 自动切换间隔时间(ms)                 | number                                                 | `3000`     |                                                            |
| dots               | 是否显示下方翻页按钮及翻页按钮的样式 | bool \| `'round'` \| `'line'`                          | `true`     | `true`, `false`, `'round'`, `'line'`                       |
| dotsColor          | 下方翻页按钮颜色                     | string                                                 |            | `'black'`, `'blue'`, `'red'`, `'green'`, `自定义css颜色值` |
| dotsTheme          | 下方翻页按钮主题                     | string                                                 | `'dark'`   | `light`                                                    |
| dotsSize           | 下方翻页按钮大小                     | string                                                 | `'normal'` | `'small'`, `'large'`                                       |
| arrows             | 是否显示两侧翻页按钮                 | bool \| `'hover'`                                      | `false`    | `true`, `false`, `'hover'`                                 |
| arrowsType         | 两侧箭头颜色                         | string                                                 | `'dark'`   | `'dark'`, `'light'`                                        |
| arrowsSize         | 两侧箭头的大小                       | `'normal'` \| `'large'`                                | `'normal'` | `'normal'` \| `'large'`                                    |
| arrowsDisabled     | 是否禁用两侧箭头                     | `{ left?: bool, right?: bool }`                        | {}         |
| onChange           | 切换时回调函数                       | (current: number, prev: number): void                  | `noop`     |                                                            |
| renderPrevArrow    | 自定义渲染切换上一个的按钮           | `(onPrev: () => void, disabled: boolean) => ReactNode` | 默认按钮   |                                                            |
| renderNextArrow    | 自定义渲染切换下一个的按钮           | `(onNext: () => void, disabled: boolean) => ReactNode` | 默认按钮   |                                                            |
| className          | 自定义额外类名                       | string                                                 | `''`       |                                                            |

### 实例方法

| 方法名  | 说明               | 参数名 | 参数描述                       |
| ------- | ------------------ | ------ | ------------------------------ |
| swipeTo | 手动切换轮播图     | index  | 需要切换的轮播图索引,从 0 开始 |
| prev    | 切换至上一张轮播图 |        |                                |
| next    | 切换至下一张轮播图 |        |                                |