Slider 轮播图
轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。
何时使用
- 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。
- 单图轮播：该样式通常用于承载运营 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 | 用于配置轮播项 | [] | |
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' |