Demos
How to import
Basic Carousel
Basic carousel
Theme Switch
Three themes are defined by default:
primary、light、darkIndicators
Indicators can be adjusted for type, position, size
type:
position:
size:
type:
dot、line、columnarposition:
left、center、rightsize:
small、mediumArrows
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
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
Control the switching time between two pictures by giving the speed attribute, the unit is ms
fade, slideControl 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 |
Method()
| 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 |
