展示类 · Carousel
轮播图
轮播图是一种媒体组件,可以在可视化应用中展示多张图片轮流播放的效果。

代码演示

如何引入

基本用法

基本用法

主题切换

默认定义了三种主题: primarylightdark

指示器

指示器可以调节类型、位置、尺寸
类型: dotlinecolumnar
位置: leftcenterright
尺寸: smallmedium

箭头

通过 showArrow 属性控制箭头是否可见
如果箭头可见,通过 arrowType 属性控制箭头展示的时机

定制箭头

通过 arrowProps 属性定制箭头样式和点击事件

播放参数

通过给 autoPlay 传入参数 interval 控制两张图片之间的时间间隔,传入 hoverToPause 控制鼠标放置在图片上时是否停止播放

动画效果与切换速度

通过给 animation 属性控制动画,可选值有 fadeslide
通过给 speed 属性控制两张图片之间的切换时间,单位为ms

受控的轮播图

API 参考

Carousel
属性说明类型默认值版本
activeIndex受控属性number-2.10.0
animation切换动画,可选值:fadeslide"fade" | "slide""slide"2.10.0
arrowProps箭头参数,用于自定义箭头样式和点击事件() => { leftArrow: ArrowButton, rightArrow: ArrowButton }-2.10.0
autoPlay是否自动循环展示,或者传入 { interval: 自动切换时间间隔(默认: 2000), hoverToPause: 鼠标悬浮时是否暂停自动切换(默认: true) }boolean | { interval?: number, hoverToPause?: boolean }true2.10.0
className样式类名string-2.10.0
defaultActiveIndex初始化时默认展示的索引number02.10.0
indicatorPosition指示器位置,可选值有: leftcenterright"left" | "center" | "right""center"2.10.0
indicatorSize指示器尺寸,可选值有: smallmedium"small" | "medium""small"2.10.0
indicatorType指示器类型,可选值有: dotlinecolumnar"dot" | "line" | "columnar""dot"2.10.0
theme指示器和箭头主题,可选值有: primarylightdark"primary" | "light" | "dark""light"2.10.0
onChange图片切换时的回调(index: number, preIndex: number) => void-2.10.0
arrowType箭头展示时机,可选值有: hoveralways"hover" | "always"always2.10.0
showArrow是否展示箭头booleantrue2.10.0
showIndicator是否展示指示器booleantrue2.10.0
slideDirection动画效果为slide时的滑动的方向,可选值有: leftright"left" | "right""left"2.10.0
speed切换速度,单位msnumber3002.10.0
style内联样式CSSProperties-2.10.0
trigger指示器触发的时机,可选值有: hoverclick"hover" | "click"-2.10.0
ArrowButton
属性说明类型默认值版本
props箭头div上的可传参数,包括style, onClick事件等React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>-2.10.0
children箭头自定义IconReact.ReactNode-2.10.0
Method()
方法说明版本
play()播放2.10.0
stop()停止播放2.10.0
goTo(targetIndex)切换到指定位置2.10.0
prev()切换到上一位置2.10.0
next()切换到下一位置2.10.0

设计变量