Carousel
Carousel
A set of carousel areas.
Importimport { Carousel } from "antd"; |
Sourcecomponents/carousel |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| arrows | Whether to show switch arrows | boolean | false | 5.17.0 |
| autoplay | Whether to scroll automatically, you can specify autoplay={{ dotDuration: true }} to display the progress bar | boolean | { dotDuration?: boolean } | false | dotDuration: 5.24.0 |
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
| adaptiveHeight | Adjust the slide's height automatically | boolean | false | |
| dotPosition | The position of the dots, which can be one of top bottom left right | string | bottom | |
| dots | Whether to show the dots at the bottom of the gallery, object for dotsClass | boolean | { className?: string } | true | |
| draggable | Enable scrollable via dragging on desktop | boolean | false | |
| fade | Whether to use fade transition | boolean | false | |
| infinite | Infinitely wrap around contents | boolean | true | |
| speed | Animation speed in milliseconds | number | 500 | |
| easing | Transition interpolation function name | string | linear | |
| effect | Transition effect | scrollx | fade | scrollx | |
| afterChange | Callback function called after the current index changes | (current: number) => void | - | |
| beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - | |
| waitForAnimate | Whether to wait for the animation when switching | boolean | false |
Find more APIs in react-slick documentation.
| Name | Description |
|---|---|
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
| next() | Change current slide to next slide |
| prev() | Change current slide to previous slide |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| arrowOffset | arrows offset to Carousel edge | number | 8 |
| arrowSize | Size of arrows | number | 16 |
| dotActiveWidth | Width of active indicator | string | number | 24 |
| dotGap | gap between indicator | number | 4 |
| dotHeight | Height of indicator | string | number | 3 |
| dotOffset | dot offset to Carousel edge | number | 12 |
| dotWidth | Width of indicator | string | number | 16 |
Basic usage.
Timing of scrolling to the next card/picture.
Show the arrows for switching.
There are 4 position options available.
Slides use fade for transition.
Show progress of dots.
