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.