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