0.1.12 • Published 7 years ago
reaction-carousel v0.1.12
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 |