React Carousel

A simple, configurable React & CSS3 carousel component.

Demo: https://josephrace.github.io/react-carousel/

Initial Aims

React <Carousel /> component to display gallery of images in carousel format
Individual elements of carousel UI broken into separate, functional components
Next/Prev links to navigate forwards and backwards navigation through images
"Dot" buttons to support navigating to a particular image
Expose configuration options to user via <Carousel /> props
Transitions using CSS3 and translate3d where possible for hardware-accelerated performance
Auto-looping
Development and build configuration with Webpack
Test environment with Jest

Implementation

Before starting I looked at various existing carousel libraries such as Bootstrap's Carousel, Owl Carousel and Slick Carousel to get ideas of what might be core features and what could be nice extras. During the project setup I took inspiration from projects such as react-component-boilerplate for my Webpack configuration.

The <Carousel /> component manages the state for the carousel and defines all methods for handling interaction and updating the state. It is the only "container" or "stateful" component. All others are "presentational" or "pure" - they do not contain any state and receive data and callbacks via props. Images or other components can be nested inside the <Carousel> component and they will be wrapped and rendered inside <CarouselSlide /> components to provided the control needed for managing slides.

CSS3 animations are used for the transitions because they are optimised by browsers for performance (e.g. translate3d uses hardware acceleration) and they allow me to express the transition start and end states in a simple manner. I also designed the carousel to support additional animations by dropping in the popular Animate.css library.

Future Development

Given more time I would like to:

Increase test coverage
Improve lazy load implementation to pre-fetch images before transition
Support more interactions e.g. drag/swipe
Improve Webpack configuration (see Authoring Libraries)
Integrate with Travis CI
Publish to npm

Usage

Wrap your images inside the <Carousel /> component. Configuration options can be passed as props.

<Carousel
  dots={true}
  interval={3000}
>
  <img src={img1} alt="" />
  <img src={img2} alt="" />
  <img src={img3} alt="" />
</Carousel>

Options

Property	Type	Default	Description
interval	number	3000	Time between slide transitions
duration	number	500	Duration of transition
animateIn	string	'slideInRight'	CSS class of incoming transition
animateOut	string	'slideOutLeft'	CSS class of outgoing transition
nextText	string	'Next'	Text to display for next element
prevText	string	'Prev'	Text to display for prev element
autoplay	boolean	true	Should carousel autoplay
nav	boolean	true	Should nav next/prev be displayed
dots	boolean	false	Should dots elements be displayed
beforeChange	function	undefined	Function to call before transition
afterChange	function	undefined	Function to call after transition

Examples