Guide
何时使用
单图轮播:该样式通常用于承载运营banner,是一个位置相对固定的模块。
多图轮播:单元信息浏览
使用注意点
当轮播组件中只有一张图片的时候,轮播组件会隐藏导航锚点、禁止自动循环(即使上层设置了)、禁止拖拽播放(即使上层设置了)。
如果您要将 Slider 放到 Dialog 中,此时你需要关闭 Dialog 的动画,避免 Slider 在计算内部元素宽度时造成出错。
如果出现图片高度 1px 的问题,可以尝试在
img标签的外部包裹一层div标签。
单图轮播:该样式通常用于承载运营banner,是一个位置相对固定的模块。
多图轮播:单元信息浏览
当轮播组件中只有一张图片的时候,轮播组件会隐藏导航锚点、禁止自动循环(即使上层设置了)、禁止拖拽播放(即使上层设置了)。
如果您要将 Slider 放到 Dialog 中,此时你需要关闭 Dialog 的动画,避免 Slider 在计算内部元素宽度时造成出错。
如果出现图片高度 1px 的问题,可以尝试在 img 标签的外部包裹一层 div 标签。






轮播组件共有两种类型:单图轮播和多图同时轮播。 在默认模式下(不指定任何属性值),轮播组件为单图轮播模式。
在单图轮播的基础上,通过指定slidesToShow属性值,可以同时进行多图轮播。
可以通过 slidesToScroll 属性制定单次轮播图片的个数。
轮播组件可以通过 slideDirection 属性设置两种轮播方向。当值为 ver 时轮播方向为垂直方向,
默认为值为 hoz 。垂直模式也可以设置单图和多图轮播。












可以通过arrowSize属性来更改导航组件的按钮尺寸,默认值为normal,
对特定场景,比如展示的图片较大的情况下,可以选择large,将导航按钮设置为大按钮。
通过 dotsDirection 可以改变导航锚点的位置,默认为 hoz 即水平方向。
当其值设为 ver 时为垂直方向展示。
通过 triggerType 可以定义 dots 触发方式,共有两种触发方式:'click', 'hover';
当其值设为 hover 时为鼠标经过触发滚动。
通过 dotsRender 可以自定义修改 dost,通过 dotsClass 可覆盖 dots 的样式。





开发者可以通过 prevArrow 和 nextArrow 两个属性传入自定义的导航箭头组件。
轮播组件的导航按钮在默认情况下为内置模式。在多图同时导航的情况下,如果想要使用外置按钮,
可以通过指定arrowPosition的属性值为outer,使用外置按钮,其默认值为inner。
可以通过 autoplay 和 autoplaySpeed 属性来设置组件是否自动轮播 和 自动轮播的速度。
默认情况下,轮播组件的表现为无穷循环模式。如果你不想无穷循环,
可以通过设置 infinite 为 false,用来禁止循环模式。
可以通过设置 pauseOnHover 属性为 true 使得 Slide 在鼠标悬浮时自动停止轮播。
用户可以包装 Slider 组件,以便进行外部控制。例如通过包装组件实现外部对 Slider 组件 autoplay 和 autoplaySpeed 值的控制。
居中模式可以突出显示最核心区域的内容,您可以通过设置 centerMode 属性址为 true 开启该功能。






通过 index 属性可以快速的定位到指定次序的 slider 。
225
175
100
200
75
300
225
175
100
200
Slider 在默认情况下会认为所有的子元素是等宽的。
通过设置 variableWidth 为 true,您可以在 Slider 中放置不同宽度的图片。
你可以为传递自定义组件到 Slider 组件中。前提是该组件一定要开放透传 props 到下层组件或元素,Slider 底层需要执行元素的 clone 操作。
如果你要将 Slider 放到 Dialog 中,此时你需要关闭 Dialog 的动画,避免 Slider 在计算内部元素宽度时造成出错。
切换跑马灯时使用渐变效果。
你可以利用 onChange 钩子函数处理一些额外的逻辑。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| adaptiveHeight | 是否使用自适应高度 | Boolean | false |
| animation | 动效类型,默认是'slide' | String/Boolean | 'slide' |
| arrows | 是否显示箭头 | Boolean | true |
| arrowSize | 导航箭头大小 可选值: 'medium', 'large' 可选值: 'medium', 'large' | Enum | 'medium' |
| arrowPosition | 导航箭头位置 可选值: 'inner', 'outer' 可选值: 'inner', 'outer' | Enum | 'inner' |
| arrowDirection | 导航箭头的方向 可选值: 'hoz', 'ver' 可选值: 'hoz', 'ver' | Enum | 'hoz' |
| autoplay | 是否自动播放 | Boolean | false |
| autoplaySpeed | 自动播放的速度 | Number | 3000 |
| nextArrow | 向后箭头 | ReactElement | null |
| prevArrow | 向前箭头 | ReactElement | null |
| centerMode | 是否启用居中模式 | Boolean | false |
| dots | 是否显示导航锚点 | Boolean | true |
| dotsDirection | 导航锚点位置 可选值: 'hoz', 'ver' | Enum | 'hoz' |
| dotsRender | 自定义导航锚点 签名: Function() => void | Function | - |
| draggable | 是否可拖拽 | Boolean | true |
| infinite | 是否使用无穷循环模式 | Boolean | true |
| defaultActiveIndex | 初始被激活的轮播图 | Number | 0 |
| lazyLoad | 是否启用懒加载 | Boolean | false |
| slideDirection | 轮播方向 可选值: 'hoz', 'ver' | Enum | 'hoz' |
| slidesToShow | 同时展示的图片数量 | Number | 1 |
| slidesToScroll | 同时滑动的图片数量 | Number | 1 |
| speed | 轮播速度 | Number | 500 |
| activeIndex | 跳转到指定的轮播图(受控) | Number | - |
| triggerType | 锚点导航触发方式 可选值: 'click', 'hover' | Enum | 'click' |
| onChange | 轮播切换的回调函数 签名: Function(index: Number) => void 参数: index: {Number} 幻灯片的索引 | Function | () => {} |
| centerPadding | Side padding when in center mode (px or %); 展示部分为center,pading会产生前后预览 | String | '50px' |
| cssEase | CSS3 Animation Easing,默认‘ease’ | String | 'ease' |
| focusOnSelect | 多图轮播时,点击选中后自动居中 | Boolean | false |
next-slider is forked from react-slick