Importimport { Carousel } from 'antd'; |
contributors
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 | |
| dotPlacement | The position of the dots, which can be one of top bottom start end | string | bottom | |
The position of the dots, which can be one of top bottom left right start end, Please use dotPlacement instead | 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |