Stop the Image Slider on Mouse Hover & start slider again when mouse is out of the image in React js

To achieve this functionality we need to save the setInterval id in state ,

With the help of id we can stop the setInterval .

We will have two functions then one to start the setInterval or image slider .

Another to stop the Image slider or setInterval function.

Example : 

  const start = () => {

    console.log('start')

    const _start = setInterval(() => {

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

    }, 4000)

    setId(_start)

  }

  const stop = () => {

    console.log('stop')

    clearInterval(id)

  }

Now we need to call these functions on Mouse Over and Mouse Out Events Like :

 <img

        onMouseOut={() => start()}

        onMouseOver={() => stop()}

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

And On the component rendering we need to call the start function in useEffect Hook as follows :

  useEffect(() => {

    start()

  }, [])

And Interval id must be saved as Follows :

  const [id, setId] = useState(null)

This Id is saved when start function is called.

All Code in Sequence should be in App.js :

import { useEffect, useState } from "react";

import image1 from "./image/image1.png"

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

import image3 from "./image/image3.jpg"

import image4 from "./image/image4.svg"

function App() {

  const [selectedImage, setSelectedImage] = useState(0)

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

  const [id, setId] = useState(null)

  useEffect(() => {

    start()

  }, [])

  const start = () => {

    console.log('start')

    const _start = setInterval(() => {

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

    }, 4000)

    setId(_start)

  }

  const stop = () => {

    console.log('stop')

    clearInterval(id)

  }

  return (

    <div>

      <img

        onMouseOut={() => start()}

        onMouseOver={() => stop()}

        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;

There are four images used , you can use any four images as used above and put them in image folder parallel to App.js File.

Follow the Video for More details :

Good Luck , Leave your comments here or below the video on youtube , Happy to help you .Keep Learning