Options

Autoplay

The carousel can advance on its own with a specified interval measured in milliseconds. An autoplayInterval without the autoplay prop being true will not do anything.

Details

Prop Name	Type	Default Value
autoplay	boolean	false
autoplayInterval	number	3000

Example

Code

<Carousel autoplay={true} scrollDistance="slide">
  {/* Cards */}
</Carousel>

---

Scroll

How far the carousel should move when its goForward() and goBack() methods are called.

Details

Prop Name	Type	Default Value
scrollDistance	"slide" | number | "screen"	slide

Using a number will cause the carousel to scroll that many pixels each time. Using "slide" will advance the carousel one slide each time. Using "screen" will advance the carousel by the width of the visible carousel.

Examples

• Slide
• Fixed Distance (number)
• Screen

Default scroll by slide width. The scroll distance will automatically update on the widths of the slides so you can have multiple widths for each slide.

Code

<Carousel scrollDistance="slide">{/* Cards */}</Carousel>

---

Page Indicators

Indicators that show what page the carousel is on. These pages are calculated from the scrollDistance and have to be styled in addition to setting the showPageIndicators boolean to true.

Details

Prop Name	Type	Default Value
showPageIndicators	boolean	false
pageIndicatorProps	object (see below)	see below

pageIndicatorProps Details

Prop Name	Type	Default Value
containerClassName	string	undefined
currentPageIndicatorClassName	string	undefined
pageIndicatorClassName	string	undefined

Example

Code

<Carousel
  showPageIndicators={true}
  pageIndicatorProps={{
    containerClassName: 'flex items-center justify-center py-4 gap-2',
    pageIndicatorClassName:
      'w-3 h-3 p-0 rounded-full bg-gray-200 border-none cursor-pointer hover:bg-pink-200',
    currentPageIndicatorClassName: 'bg-pink-500 hover:bg-pink-500',
  }}
  scrollDistance="screen"
>
  {/* Cards */}
</Carousel>

---

Wrapper Styling

Apply classNames to the <div> that contains the children. This is likely how you will determine the spacing between items in the carousel.

By default, this wrapper has display: flex applied.

Details

Prop Name	Type	Default Value
className	string	undefined

Example

Code

<Carousel className={'gap-4'}>{/* Cards */}</Carousel>

---

Before/After Slide

Functions that are invoked when the progression methods (goBack()/goForward()) are called or when carousel changes its scroll position.

Details

Prop Name	Type	Default Value
beforeSlide	() => void	undefined
afterSlide	() => void	undefined

beforeSlide: Runs a given function before scrolling when a progression method is called. It will also run right before the carousel registers that it has been scrolled on if manually scrolled.

afterSlide: Runs a given function after scrolling when a progression method is called or after manually scrolling.

Example

This is a code usage example. Docusaurus will not run passed functions because the components are converted to static HTML at build time.

<Carousel beforeSlide={() => myCustomBeforeFunction()}>{/* Cards */}</Carousel>

<Carousel afterSlide={() => myCustomAfterFunction()}>{/* Cards */}</Carousel>