Slider 轮播图 - DingTalk Help Center

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

何时使用

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

组件示例

组件属性

属性	说明	类型	默认值
`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[]	`[]`
`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'`