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

Theme Switch

Three themes are defined by default: primarylightdark

Indicators

Indicators can be adjusted for type, position, size
type: dotlinecolumnar
position: leftcenterright
size: smallmedium

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

API reference

Carousel
PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
activeIndexControlled propertynumber-2.10.0
animationAnimation, optional:fade, slide"fade" | "slide""slide"2.10.0
arrowPropsArrow parameters for custom arrow styles and click events() => { leftArrow: ArrowButton, rightArrow:ArrowButton }-2.10.0
autoPlayWhether 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 }true2.10.0
classNameThe className of Carousel containerstring-2.10.0
defaultActiveIndexThe index displayed by default when initializingnumber02.10.0
indicatorPositionIndicator position, optional values are: leftcenterright"left" | "center" | "right""center"2.10.0
indicatorSizeIndicator size, optional values are: smallmedium"small" | "medium""small"2.10.0
indicatorTypeIndicator type, optional values are: dotlinecolumnar"dot" | "line" | "columnar""dot"2.10.0
themeIndicator and arrow theme, optional values are: primarylightdark"primary" | "light" | "dark""light"2.10.0
onChangeCallback when image is switched(index: number, preIndex: number) => void-2.10.0
arrowTypeArrow display timing, optional values are: hoveralways"hover" | "always"always2.10.0
showArrowWhether to show arrowsbooleantrue2.10.0
showIndicatorWhether to show the indicatorbooleantrue2.10.0
slideDirectionThe direction of the slide when the animation effect is slide, optional: leftright"left" | "right""left"2.10.0
speedSwitching speednumber3002.10.0
styleCarousel styleCSSProperties-2.10.0
triggerWhen the indicator is triggered, the optional values are: hoverclick"hover" | "click"-2.10.0
ArrowButton
PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
propsParameters on the arrow div, including style, onClick events, etcDetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>-2.10.0
childrenArrow custom iconReact.ReactNode-2.10.0
Method()
MethodInstructionsVersion
play()Play2.10.0
stop()Stop2.10.0
goTo(targetIndex)Go to target index2.10.0
prev()Go to previous index2.10.0
next()Go to next index2.10.0

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED