> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider 轮播图

> Slider 轮播图组件文档，讲解轮播内容与切换效果等属性配置，以幻灯片形式横向展示多组内容。

轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。

## 何时使用

* 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。
* 单图轮播：该样式通常用于承载运营 banner，是一个位置相对固定的模块。
* 多图轮播：单元信息浏览。

## 组件示例

<iframe src="https://www.aliwork.com/developer/slider-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性                     | 说明                                   | 类型                                                                          | 默认值        |
| ---------------------- | ------------------------------------ | --------------------------------------------------------------------------- | ---------- |
| `animation`            | 用于选择轮播项动效类型，slide：左右滑动、fade：渐变       | `'slide' \| 'fade'`                                                         | `'slide'`  |
| `arrowDirection `      | 控制箭头展示方向                             | `'hoz' \|'ver'`                                                             | `'hoz'`    |
| `arrowPosition`        | 用于控制箭头位置                             | `'inner' \| 'outer'`                                                        | `'inner'`  |
| `arrowSize`            | 用于控制箭头大小                             | `'medium' \| 'large'`                                                       | `'medium'` |
| `arrows`               | 是否开启轮播项箭头                            | `boolean`                                                                   | `true`     |
| `autoplay`             | 用于选择是否自动播放轮播项                        | `boolean`                                                                   | `false`    |
| `autoplaySpeed`        | 轮播项自动播放速度，单位：ms                      | `number`                                                                    | `3000`     |
| `centerMode`           | 是否开启居中模式                             | `boolean`                                                                   | `false`    |
| `diyContents`          | 用于输入自定义模式数据，仅**isDiy**设置为true时生效     | `any[]`                                                                     | `[]`       |
| `diyContentsRender`    | 用于渲染自定义模式渲染函数，仅**isDiy**设置为true时生效   | `(item: any, index: number) => ReactNode`                                   | -          |
| `dots`                 | 是否开启导航锚点                             | `boolean`                                                                   | `true`     |
| `dotsDirection`        | 导航锚点显示位置                             | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `focusOnSelect`        | 用于多图轮播时，点击选中后自动居中                    | `boolean`                                                                   | `false`    |
| `images`               | 用于配置轮播项                              | [SliderDataSource\[\]](/zh/open/yida/components/interface#sliderdatasource) | `[]`       |
| `isDiy`                | 用于开启自定义模式                            | `boolean`                                                                   | `false`    |
| `lazyLoad`             | 是否开启懒加载模式                            | `boolean`                                                                   | `false`    |
| `margin`               | 用于控制轮播项间距                            | `number`                                                                    | `10`       |
| `slideDirection`       | 用于控制轮播方向                             | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `slideImageHeight`     | 轮播图高度,单位为px或设置%                      | `string`                                                                    | `'300px'`  |
| `slideImageHeightAuto` | 开启轮播项高度自适应（图片时会保持长宽比）                | `boolean`                                                                   | `false`    |
| `slideImageWidth`      | 用于设置轮播项宽度                            | `string`                                                                    | `'100%'`   |
| `slidesToScroll`       | 用于控制同时滑动的轮播项数量                       | `number`                                                                    | `1`        |
| `slidesToShow`         | 用于控制同时展示的轮播项数量，当**type** 属性为multi时生效 | `number`                                                                    | `2`        |
| `speed`                | 轮播速度，单位: ms                          | `number`                                                                    | `500`      |
| `triggerType`          | 锚点导航触发方式                             | `'click' \| 'hover'`                                                        | `'click'`  |
| `type`                 | 用于配置轮播方式，single：单项轮播、multi：多项轮播      | `'single' \| 'multi'`                                                       | `'single'` |