How to make Image Slider in React Js in Hindi ✅ [ Automatic Image Slider React JS with Buttons ]

 Automatic Image Slider React JS with Buttons 

to create image slider we take an state array and work on the indexes in that array

create a folder named image and add four image with name as import below :

import { useEffect, useState } from "react";

import image1 from "./image/image1.jpg"

import image2 from "./image/image2.png"

import image3 from "./image/image3.svg"

import image4 from "./image/image4.png"

function App() {

  const [selectedImage, setSelectedImage] = useState(0)

  const [allImages, setAllImages] = useState([image1, image2, image3, image4])

  useEffect(() => {

    setInterval(() => {

      setSelectedImage(selectedImage => selectedImage < 3 ? selectedImage + 1 : 0)

    }, 4000)

  }, [])

  return (

    <div>

      <img width={810} height={400} src={allImages[selectedImage]} /> <br />

      <button

        onClick={() => {

          if (selectedImage > 0)

            setSelectedImage(selectedImage - 1)

        }}

      >PREV</button>

      <button

        onClick={() => {

          if (selectedImage < allImages.length - 1)

            setSelectedImage(selectedImage + 1)

        }}

      >NEXT</button>

    </div>

  );

}

export default App;

Automatic Image Slider React JS with Buttons Check video for more details :