轮播组件,就是以幻灯片的方式,在页面中横向展示诸多内容的组件。
img
标签的外部包裹一层 div
标签。轮播组件共有两种类型:单图轮播和多图同时轮播。 在默认模式下(不指定任何属性值),轮播组件为单图轮播模式。
注意: 如果出现图片 1px 高度的问题,建议将图片的外部包括一层 div
来避免这个问题。
轮播组件的导航按钮在默认情况下为内置模式。在多图同时导航的情况下,如果想要使用外置按钮,
可以通过指定arrowPosition
的属性值为outer
,使用外置按钮,其默认值为inner
。
默认情况下,轮播组件的表现为无穷循环模式。如果你不想无穷循环,
可以通过设置 infinite
为 false
,用来禁止循环模式。
值得注意的是,由于组件的默认行为是无穷模式,所以默认情况下,自动将单张图片复制了两份,
如果你不想启用这样的复制效果,只要关闭 infinite
属性即可。
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
className | 自定义传入的样式 | string | - | |
adaptiveHeight | 是否使用自适应高度 | boolean | false | |
animation | 动效类型,默认是'slide' | string | boolean | 'slide' | |
arrows | 是否显示箭头 | boolean | true | |
arrowSize | 导航箭头大小 | 'medium' | 'large' | 'medium' | |
arrowPosition | 导航箭头位置 | 'inner' | 'outer' | 'inner' | |
arrowDirection | 导航箭头方向 | 'hoz' | 'ver' | 'hoz' | |
autoplay | 是否自动播放 | boolean | false | |
autoplaySpeed | 自动播放的速度 | number | 3000 | |
prevArrow | 前向箭头节点 | ReactElement | - | |
nextArrow | 后向箭头节点 | ReactElement | - | |
centerMode | 是否启用居中模式 | boolean | false | |
dots | 是否显示导航锚点 | boolean | true | |
dotsDirection | 导航锚点方向 | 'hoz' | 'ver' | 'hoz' | |
dotsRender | 自定义导航锚点 签名: 参数: index: 锚点编号 current: 当前幻灯片编号 |
(index: number, current: number) => void | - | |
draggable | 是否可拖拽 | boolean | true | |
infinite | 是否使用无穷循环模式 | boolean | true | |
defaultActiveIndex | 初始被激活的轮播图 | number | 0 | |
lazyLoad | 是否启用懒加载 | boolean | false | |
slideDirection | 轮播方向 | 'hoz' | 'ver' | 'hoz' | |
slidesToShow | 同时展示的图片数量 | number | 1 | |
slidesToScroll | 同时滑动的图片数量 | number | 1 | |
speed | 轮播速度 | number | 600 | |
activeIndex | 跳转到指定的轮播图(受控) | number | - | |
triggerType | 导航锚点触发方式 | 'click' | 'hover' | 'click' | |
onChange | 轮播切换的回调函数 | (index: number) => void | - | |
centerPadding | center 模式下的边缘 padding 值 (px or %); | string | '50px' | |
cssEase | CSS3 Animation Easing,默认‘ease’ | string | 'ease' | |
focusOnSelect | 多图轮播时,是否在点击选中后自动居中 | boolean | 'false' | |
style | 自定义样式 | CSSProperties | - | |
waitForAnimate | 是否等待动画结束后再执行动作 | boolean | true | |
accessibility | 是否启用无障碍支持,使用左右键可以切换轮播图 | boolean | false | |
children | 子元素 | ReactNode | - | |
dotsClass | 导航锚点样式类名 | string | - | |
variableWidth | Slider 在默认情况下会认为所有的子元素是等宽的。通过设置 variableWidth 为 true ,您可以在 Slider 中放置不同宽度的图片。 |
boolean | - | |
onBeforeChange | 轮播切换前的回调函数 | (index: number, currentIndex?: number) => void | - | |
swipe | 是否启用滑动 | boolean | true | |
edgeEvent | 在滑动到头时触发的回调函数 | (swipeDirection: 'left' | 'right') => void | - | |
edgeFriction | 边缘摩擦系数,数值越大,滑动越慢 | number | 0.35 | |
swipeEvent | 滑动事件回调函数 | (swipeDirection: 'left' | 'right' | 'vertical' | 'down' | 'up') => void | - | |
pauseOnHover | 在鼠标悬浮时自动停止轮播 | boolean | false |
next-slider is forked from react-slick.