Create a Slideshow Component with useEffect and useState Hook - Coding

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.

edf

Prerequisites:

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:

fff

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:

Animation42

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Difference between React.memo() and useMemo() in React.
Explain the purpose of the componentWillUnmount() method?
What is React Router?
Next JS File Conventions: not-found.js
How does a pure component differ from a functional component?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15