Skip to content

Latest commit

 

History

History
66 lines (51 loc) · 2.71 KB

index.en-US.md

File metadata and controls

66 lines (51 loc) · 2.71 KB
category group title description cover coverDark demo
Components
Data Display
Carousel
A set of carousel areas.
cols
2

When To Use

  • When there is a group of content on the same level.
  • When there is insufficient content space, it can be used to save space in the form of a revolving door.
  • Commonly used for a group of pictures/cards.

Examples

Basic Position Scroll automatically Fade in Arrows for switching Component Token

API

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 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

Methods

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.

Design Token

FAQ

How to add custom arrows?

See #12479.