react-easy-carousel

A no-configuration no-CSS React carousel.

Installation

With npm:

npm install --save react-easy-carousel

Or with Yarn:

yarn add react-easy-carousel

Usage

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