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
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.
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
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 |
|---|---|---|
wrapperClassName | string | undefined |