Create a Slideshow Component with useEffect and useState Hook

The Slideshow component is a reusable React component that displays a slideshow of images along with navigation buttons to move between images. It uses the useEffect and useState hooks to manage the state of the current image index and to automatically cycle through the images at regular intervals. In this tutorial, we will see how we can create a slideshow component with ReactJS useEffect and useState hooks.

Output Preview: Let us have a look at how the slideshow component will look like.

Prerequisites:

• JavaScript
• React Basics
• React Hooks

Approach for Creating Slideshow Component :

• First, declare a state variable currentIndex initialized to 0. This variable represents the index of the currently displayed image.
• Sets up an interval to call the goToNextSlide() function every 3000 milliseconds (3 seconds).
• Returns a cleanup function to clear the interval when the component unmounts (This is equivalent to componentWillUnmount).

Steps to create SlideShow Components:

Step 1: Create the React application using the following command.

npx create-react-app slideshow
cd slideshow

Folder Structure:

The updated dependencies in package.json file will look like:

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Create the required files and add the given codes.

CSS

/* SlideShow.css */

body {
    background-color: rgb(175, 195, 175);
    margin: 0;
    padding: 0;
}

.slideshow-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.slideshow-image {
    width: 600px;
    height: 360px;
    object-fit: cover;
    border: 2px solid green;
}

.slideshow-buttons {
    position: absolute;
    bottom: 230px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.slideshow-buttons button {
    margin: 0 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.slideshow-buttons button:first-child {
    background-color: blue;
    color: white;
}

.slideshow-buttons button:last-child {
    background-color: red;
    color: white;
}

h2 {
    color: #0f0713;
    font-size: 30px;
    position: absolute;
    top: 40vh;
    left: 50%;
    z-index: 100;
    width:30%;
    transform: translateX(-50%);
}

Javascript

//App.js

import React from 'react';
import Slideshow from './SlideShow';

const images = [
'https://media.geeksforgeeks.org/wp-content/uploads/20230407153931/gfg-tshirts.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240103185847/black-hoodie.webp',
'https://media.geeksforgeeks.org/wp-content/uploads/20240103185713/hoodie.jpg'
];

const App = () => {
    return (
        <div className="App">
            <Slideshow images={images} />
        </div>
    );
};

export default App;

Javascript

//SlideShow.js

import React, { useState, useEffect } from 'react';
import './SlideShow.css';

const Slideshow = ({ images }) => {
    const [currentIndex, setCurrentIndex] = useState(0);

    const goToNextSlide = () => {
        setCurrentIndex((prevIndex) =>
            prevIndex === images.length - 1 ? 0 : prevIndex + 1
        );
    };

    const goToPreviousSlide = () => {
        setCurrentIndex((prevIndex) =>
            prevIndex === 0 ? images.length - 1 : prevIndex - 1
        );
    };

    useEffect(() => {
        const intervalId = setInterval(goToNextSlide, 3000);

        return () => clearInterval(intervalId);
    }, [images.length]);

    return (
        <div className="slideshow-container">
            <h2>
                Geeksforgeeks Slideshow Component with
                useEffect and useState
            </h2>
            <br />
            <img
                src={images[currentIndex]}
                alt={`Slide ${currentIndex}`}
                className="slideshow-image"
            />
            <div className="slideshow-buttons">
                <button onClick={goToPreviousSlide}>Previous</button>
                <button onClick={goToNextSlide}>Next</button>
            </div>
        </div>
    );
};

export default Slideshow;

Output: