1.1.5 • Published 6 years ago
react-easy-carousel v1.1.5
react-easy-carousel
A no-configuration no-CSS React carousel.
Installation
With npm:
npm install --save react-easy-carouselOr with Yarn:
yarn add react-easy-carouselUsage
import Carousel from 'react-easy-carousel'
...
<Carousel animation='slide' dots>
<img src='http://via.placeholder.com/600x400?text=First' />
<img src='http://via.placeholder.com/600x400?text=Second' />
<img src='http://via.placeholder.com/600x400?text=Third' />
</Carousel>Or if you need custom controls, like thumbnails:
import Carousel from 'react-easy-carousel'
...
<Carousel
animation='slide'
buttons={slideNumber => <img src={`/thumbnail-${slideNumber}.jpg`} />}
>
<img src='http://via.placeholder.com/600x400?text=First' />
<img src='http://via.placeholder.com/600x400?text=Second' />
<img src='http://via.placeholder.com/600x400?text=Third' />
</Carousel>Options
| Property | Description | Default |
|---|---|---|
| active | The current visible slide | 0 |
| auto | The number of milliseconds until the active slide automatically changes | 7000 |
| animation | The animation style of the slide change ("slide" or "fade") | "slide" |
| animationDuration | The duration of the transition animation in milliseconds | 300 |
| background | The slide default background color | "#fff" |
| dots | Shows control buttons at the bottom of the carousel | false |
| dotColor | The color of the dot controls | "#666" |
| dotActiveColor | The color of the active dot button | "#000" |
| dotSize | The dot size in pixels | 12 |
| buttons | Pass in a function to create custom control buttons | n/a |