Package for React Carousel

I typically use Semantic UI to help stylize my web applications. The package allows you to create unique and easy-to-use web designs. Semantic UI React is the official React integration for Semantic UI and allows you to use pre-made components to help create design elements. However, when searching for a way to create a Carousel, or an automatic slideshow of pictures, for a web application I was creating, Semantic UI was no help. I knew there had to be an easier way of doing this than writing out long and boring CSS animation code. So I turned to my good friend Google and found this great package:

react-responsive-carousel

This package is described as a “powerful, lightweight and fully customizable carousel component for React apps.” It is responsive and mobile friendly, making it super easy to incorporate into any of your React apps.

Installation

To install this package, all you have to do is run the following line in your terminal and you should be all set to go:

npm install react-responsive-carousel --save

Use

The package can be easily installed by importing the Carousel component and rendering it as follows:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
class DemoCarousel extends Component {
   render() {
        return (
         <Carousel>
         <div>
             <img src="assets/1.jpeg" />
             <p className="legend">Legend 1</p>
        </div>
        <div>
             <img src="assets/2.jpeg" />
             <p className="legend">Legend 2</p>
         </div>
         <div>
             <img src="assets/3.jpeg" />
             <p className="legend">Legend 3</p>
         </div>
        </Carousel>
      );
   }
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

Attributes

The package comes with a number of attributes that allow you to personalize your Carousel. Some attributes that I played with for my application were:

showThumbs: “true” — this allowed me to show thumbnails of all the images under the selected photo

autoPlay: “true” — begins to automatically play the slideshow when the page loads

infiniteLoop: “true” — goes back to the first slide at the end of the slideshow of photos

interval: 2000 — allows you to choose the exact amount of time to pass between each photo