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;
Output



For taking full control of the React Image Gallery, refer here.
Thank you All!!! Hope you find this useful.
If you liked our content and it was helpful, you can buy us a coffee or a pizza. Thank you so much.

You must be logged in to post a comment.