Skip to main content

Scroll

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

API​

Prop NameTypeDefault Value
scrollDistance"slide" | number | "screen"slide
  • slide - Using "slide" will advance the carousel one slide each time.
  • number - Using a number will cause the carousel to scroll that many pixels each time.
  • screen - Using "screen" will advance the carousel by the width of the visible carousel.

Slide (default)​

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" showPageIndicators>
  <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} showPageIndicators>
  <img src="pexels-01.jpg" />
  <img src="pexels-02.jpg" />
  <img src="pexels-03.jpg" />
</Carousel>

Screen​

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

Code​

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