- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
A carousel component. Scales with its container.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoplay | Whether to scroll automatically | boolean | false | |
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
| 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 and any others | boolean | { className?: string } | true | |
| 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 |
| 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 |
Find more APIs in react-slick documentation.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| dotActiveWidth | Width of active indicator | number | 24 |
| dotHeight | Height of indicator | number | 3 |
| dotWidth | Width of indicator | number | 16 |
Basic usage.
Timing of scrolling to the next card/picture.
There are 4 position options available.
Slides use fade for transition.
