@app-elements/carousel NPM

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.