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 |