@app-elements/carousel

Carousel

Simple (P)React carousel with arrows and dot indicators.

Installation

npm install --save @app-elements/carousel

Usage

import Carousel from '@app-elements/carousel'

const items = ['fff', 'a7c', '09d', '411', '111']

<Carousel withDots>
  {items.map(hex => (
    <Image
      src={`http://www.placehold.it/400x300/${hex}/f44?text=${hex}`}
      unloadedSrc={`http://www.placehold.it/400x300/eee/eee?text=Loading`}
      style='width: 100%'
    />
  ))}
</Carousel>

Props

Prop	Type	Default	Description
className	String	'carousel-slide'	className given to each slide element.
wrapperClass	String	''	className given to top-level carousel div.
noNav	Boolean	false	Set to true to skip rendering prev/next elements.
withDots	Boolean	false	If true, renders indicator dots below slides.
active	Number	0	The active slide, must be an index of one of the children.
tolerance	Number	100	Tolerance for detecting touch swipes.
children	Array	None	Each child is one of the slides in the Carousel.