How to create Image Slider in ReactJS ?

Last Updated : 26 Jul, 2024

Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps.

Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to show multiple images of products.

We can create an image slider in ReactJS using Material UI. It has this component available for us and it is very easy to integrate. In this tutorial, we will learn how to create image sliders from scratch using ReactJS.

Before learning how to build an image slider for a web application in ReactJS, you should know the prerequisites so that you can build an image slider without any doubts or issues.

Prerequisites to Create Image Slider in ReactJS

After learning these concepts, we can now create an image slider in ReactJS. The steps for creating an image slider are shown below.

Steps to Create Image Slider in ReactJS

Follow these easy and simple steps to build your first image slider in ReactJS. The steps are explained with ReactJS code and examples for better understanding.

Step 1: Create a data set for Image Collection

Store the image paths and labels in a JavaScript array for the image collection as given below.

const MyCollection = [
    {
        label: "First Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000010/1.png",
    },
    {
        label: "Second Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000009/2.png",
    },
    {
        label: "Third Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000008/3.png",
    },
];

Step 2: Display the Images with img Tag

Simply use the img tag to display the image collection and use an alt attribute for alt text.

<img
     src={MyCollection[index].imgPath}
     alt={MyCollection[index].label}
/>

Step 3: Create the Image Slider

Use MUI Paper, Typography, and MobileStepper components and icons to design and create the slider structure. Import and use them from the Material UI library.

Step 4: Define the slider functions

Define a function to change the image index when the next button is clicked.

const goToNextPicture = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

Creating Image Slider in ReactJS Example:

This example demonstrates a working React Image Slider using the MUI components.

JavaScript

// Filename - App.js

import React from "react";
import Button from "@material-ui/core/Button";
import MobileStepper from "@material-ui/core/MobileStepper";
import Paper from "@material-ui/core/Paper";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import Typography from "@material-ui/core/Typography";
import { useTheme } from "@material-ui/core/styles";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";

// Collection of images with their labels and paths
const MyCollection = [
    {
        label: "First Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000010/1.png",
    },
    {
        label: "Second Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000009/2.png",
    },
    {
        label: "Third Picture",
        imgPath:
            "https://media.geeksforgeeks.org/wp-content/uploads/20210208000008/3.png",
    },
];

const App = () => {
    const CollectionSize = MyCollection.length;
    const theme = useTheme();
    const [index, setActiveStep] = React.useState(0);
    
     // Function to go to the next picture
    const goToNextPicture = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    return (
        <div
            style={{
                marginLeft: "40%",
            }}
        >
            <h2>How to Create Image Slider in ReactJS?</h2>
            <div
                style={{
                    maxWidth: 400,
                    flexGrow: 1,
                }}
            >
                <Paper
                    square
                    elevation={0}
                    style={{
                        height: 50,
                        display: "flex",
                        paddingLeft: theme.spacing(4),
                        backgroundColor: theme.palette.background.default,
                        alignItems: "center",
                    }}
                >
                    <Typography>{MyCollection[index].label}</Typography>
                </Paper>
                <img
                    src={MyCollection[index].imgPath}
                    style={{
                        height: 255,
                        width: "100%",
                        maxWidth: 400,
                        display: "block",
                        overflow: "hidden",
                    }}
                    alt={MyCollection[index].label}
                />
                <MobileStepper
                    variant="text"
                    position="static"
                    index={index}
                    steps={CollectionSize}
                    nextButton={
                        <Button
                            size="small"
                            onClick={goToNextPicture}
                            disabled={index === CollectionSize - 1}
                        >
                            Next
                            {theme.direction !== "rtl" ? (
                                <KeyboardArrowRight />
                            ) : (
                                <KeyboardArrowLeft />
                            )}
                        </Button>
                    }
                />
            </div>
        </div>
    );
};

export default App;

Output:

Conclusion

Creating an image slider makes your web application more dynamic and interactive. This tutorial showed an easy process to create an image slider in ReactJS. We also created a live working image slider that you can use for your web applications.

There are also many options to customize the structure and appearance of the image slider according to your needs. We have also covered some basic customization options, but you can experiment with them to improve your website UX.

How To Connect Node with React?

gouravhammad

Improve

Article Tags :