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
autoplayWhether to scroll automaticallybooleanfalse
dotPositionThe position of the dots, which can be one of top bottom left rightstringbottom
dotsWhether to show the dots at the bottom of the gallery, object for dotsClass and any othersboolean | { className?: string }true
easingTransition interpolation function namestringlinear
effectTransition effectscrollx | fadescrollx
afterChangeCallback function called after the current index changesfunction(current)-
beforeChangeCallback function called before the current index changesfunction(from, to)-

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

Find more APIs in react-slick documentation.

FAQ#

How to add custom arrows?#

See #12479.