Scroll

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

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

Screen (default)

Scroll by the width of the "screen" or the container the carousel is in.

Code

<Carousel scrollDistance="screen" showDots>
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>

Slide

Scroll by the width of each slide. Slides can be different widths and the carousel will scroll adjust the scroll distance internally when the container size is changed.

Code

<Carousel scrollDistance="slide" showDots>
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>

Fixed Distance (number)

Scroll by a fixed distance measured in px. This example scrolls by 100px.

Code

<Carousel scrollDistance={100} showDots>
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>