reaction-carousel

A Carousel Component That Build With Pure React

Installation

npm:

npm install reaction-carousel --save

yarn:

yarn add reaction-carousel

⚠️ Also you should add style and fonts

@import "~reaction-carousel/lib/reaction-carousel.scss";
Or
@import "~reaction-carousel/lib/reaction-carousel.css";

Example

import React, { Component } from 'react';
import Carousel from 'reaction-carousel';

class App extends Component {

  render() {
    return (
        <Carousel>
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
          <img src="https://unsplash.it/1200/310?random" />
        </Carousel>
    );
  }
}

| Property | Type | Description | Working | | ------------- | ---- | ----------- | ------- | | children | array or object | carousel children | Yes | | transitionTime | number | custom transition time for sliding items | Yes | | arrows | bool | Should we show Left and right nav arrows | Yes | | dots | bool | Should we show dots | Yes | | autoPlay | bool | auto playing | Yes | | autoplaySpeed | bool | auto playing speed | Yes | | loop | bool | enable infinite loop | Yes | | draggable | bool | enable draggable for slides | No | | slidesToShow | bool | Number of slides to be visible at a time | Yes |