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#

PropertyDescriptionTypeDefault
afterChangeCallback function called after the current index changesfunction(current)-
autoplayWhether to scroll automaticallybooleanfalse
beforeChangeCallback function called before the current index changesfunction(from, to)-
dotsWhether to show the dots at the bottom of the gallerybooleantrue
easingTransition interpolation function namestringlinear
effectTransition effectscrollx | fadescrollx
verticalWhether to use a vertical displaybooleanfalse

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