Carousel

A carousel component. Scales with its container.

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

API#

PropertyDescriptionTypeDefaultVersion
afterChangeCallback function called after the current index changesfunction(current)-
autoplayWhether to scroll automaticallybooleanfalse
beforeChangeCallback function called before the current index changesfunction(from, to)-
dotPositionThe position of the dots, which can be one of top bottom left rightstringbottom3.17.0
dotsWhether to show the dots at the bottom of the gallerybooleantrue
easingTransition interpolation function namestringlinear
effectTransition effectscrollx | fadescrollx

Methods#

NameDescription
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

For more info on the parameters, refer to the https://github.com/akiran/react-slick

CardCollapse