Carousel - Semi Design

Show · Carousel

Carousel

Carousel is a media component that can display the effect of playing multiple pictures in turn in a visualization application.

Demos

How to import

Basic Carousel

Basic carousel

Theme Switch

Three themes are defined by default: primary、light、dark

Indicators

Indicators can be adjusted for type, position, size
type: dot、line、columnar
position: left、center、right
size: small、medium

Arrows

Control whether the arrow is visible through the showArrow property
If the arrow is visible, use the arrowType property to control the timing of the arrow display

Custom Arrow

Customize arrow styles and click events through the arrowProps property

Play Parameters

Pass the parameter interval to autoPlay to control the time interval between two pictures, and pass hoverToPause to control whether to stop playing when the mouse is placed on the picture

Animation and Speed

Control the animation by giving the animation property, optional values are fade, slide
Control the switching time between two pictures by giving the speed attribute, the unit is ms

Controlled Carousel

API reference

Carousel

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT	VERSION
activeIndex	Controlled property	number	-	2.10.0
animation	Animation, optional:`fade`, `slide`	"fade" \| "slide"	"slide"	2.10.0
arrowProps	Arrow parameters for custom arrow styles and click events	() => { leftArrow: ArrowButton, rightArrow:ArrowButton }	-	2.10.0
autoPlay	Whether to automatically display in a loop, or pass in { interval: Auto switch time interval(default: 2000), hoverToPause: Whether to pause automatic switching when the mouse is hovering(default: true) }	boolean ｜ { interval?: number, hoverToPause?: boolean }	true	2.10.0
className	The className of Carousel container	string	-	2.10.0
defaultActiveIndex	The index displayed by default when initializing	number	0	2.10.0
indicatorPosition	Indicator position, optional values are: `left`、`center`、`right`	"left" \| "center" \| "right"	"center"	2.10.0
indicatorSize	Indicator size, optional values are: `small`、`medium`	"small" \| "medium"	"small"	2.10.0
indicatorType	Indicator type, optional values are: `dot`、`line`、`columnar`	"dot" \| "line" \| "columnar"	"dot"	2.10.0
theme	Indicator and arrow theme, optional values are: `primary`、`light`、`dark`	"primary" \| "light" \| "dark"	"light"	2.10.0
onChange	Callback when image is switched	(index: number, preIndex: number) => void	-	2.10.0
arrowType	Arrow display timing, optional values are: `hover`、`always`	"hover" \| "always"	always	2.10.0
showArrow	Whether to show arrows	boolean	true	2.10.0
showIndicator	Whether to show the indicator	boolean	true	2.10.0
slideDirection	The direction of the slide when the animation effect is `slide`, optional: `left`、 `right`	"left" \| "right"	"left"	2.10.0
speed	Switching speed	number	300	2.10.0
style	Carousel style	CSSProperties	-	2.10.0
trigger	When the indicator is triggered, the optional values are: `hover`、`click`	"hover" \| "click"	-	2.10.0

ArrowButton

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT	VERSION
props	Parameters on the arrow div, including style, onClick events, etc	DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>	-	2.10.0
children	Arrow custom icon	React.ReactNode	-	2.10.0

Methods

Some internal methods provided by Carousel can be accessed through ref:

Method	Instructions	Version
play()	Play	2.10.0
stop()	Stop	2.10.0
goTo(targetIndex)	Go to target index	2.10.0
prev()	Go to previous index	2.10.0
next()	Go to next index	2.10.0