Carousel Image Gallery using React.js

In this post, we will create a Carousel Image Gallery in React.js. This will be responsive with AutoPlay and Full-Screen functionality. We will create a component and pass array of images to it using props.

Install the package React Image Gallery. It requires React 16.0.0 or later.

npm install react-image-gallery

Create a new component. I will name this as Slider.js. Add the following import statements.

import React from 'react'
import ImageGallery from 'react-image-gallery';
import "react-image-gallery/styles/css/image-gallery.css";

Create a function and export this.

function Slider(prop) {
  return (
    <ImageGallery items={prop.images} />
  )
}

export default Slider

Now, you can render this component to any page. I will render this on my Gallery page. Create a new page gallery.js. Add the following code to it.

import React from 'react';
import Slider from '../components/slider';

const images = [
  {
    original: '/images/gallery/1.jpg',
    thumbnail: '/images/gallery/1.jpg',
  },
  {
    original: '/images/gallery/2.jpg',
    thumbnail: '/images/gallery/2.jpg',
  },
  {
    original: '/images/gallery/3.jpg',
    thumbnail: '/images/gallery/3.jpg',
  },
];

function gallery() {
  return (
    <Slider images={images} />
  );
}

export default gallery;