Want to pause the autoplay carousel?

Question

Have written code for image carousel in react hooks. plan to implement carousel without using library . I have successfully implement left arrow, right arrow and Autoplay. But I don't know how to pause the Autoplay while I click on the carousel slide on the image . Have included my code below. Can you please guide me to do this. Here is my code.

 import React, { useEffect, useState, useRef } from "react";
 import { departmentSlides } from "../../../components/common/Constants";
function Department() {
  let [currentPosition, setCurrentPosition] = useState(0); 
  let departmentSlide = departmentSlides[currentPosition]; 
  useEffect(() => {
    const interval = setInterval(() => {
      currentPosition !== departmentSlides.length - 1 // Check index length
        ? setCurrentPosition(currentPosition + 1)
        : setCurrentPosition((currentPosition = 0));
    }, 12000);
    return () => clearTimeout(interval);
  });

  const goRight = () => {
    currentPosition !== departmentSlides.length - 1 // Check index length
      ? setCurrentPosition(currentPosition + 1)
      : setCurrentPosition((currentPosition = 0));
  };

  const goLeft = () => {
    currentPosition !== 0 // Check index length
      ? setCurrentPosition(currentPosition - 1)
      : setCurrentPosition((currentPosition = departmentSlides.length - 1));
  };

  return (
    <div className="container-fluid">
      {/* <div className="carousel"> */}
      <div className="row">
        <div className="col-lg-12">
          <img
            src={departmentSlide.src}
            className="img-responsive department-img"
            alt="images"
          />
          <div className="row">
            <div className="col-lg-8 col-sm-12 col-xs-12 col-md-12 col-xl-8">
              <div className="department-content">
                <h2 className="title text-sm-12 text-md-12 text-xs-12 text-xl-12 text-lg-12">
                  {departmentSlide.title}
                </h2>
                <p className="text text-sm-12 text-md-12 text-xs-12 text-xl-12 text-lg-12">
                  {departmentSlide.text}
                </p>

                <div className="know">
                  <a
                    className="btn btn-white p-4"
                    role="button"
                    href={departmentSlide.link}
                  >
                    KNOW MORE
                  </a>
                </div>
              </div>
            </div>

            <div className="arrow d-flex">
              <button className="" onClick={goLeft} style={{ outline: "none" }}>
                <i className="fa fa-chevron-left"></i>
              </button>
              <button
                className=""
                onClick={goRight}
                style={{ outline: "none" }}
              >
                <i className="fa fa-chevron-right"></i>
              </button>
            </div>
           </div>
        </div>
      </div>
    </div>
  );
}
export default Department;

Answer 1

First, build state of autoPlay and set the value to true and use the function setTimeOut instead of setInterval.

Change the value of autoPlay to false by clicking on the carousel slider on the image.

Use an if condition to check the value of autoPlay and if it has false value, use the clearTimeout method to stop AutoPlay.

function Department() {
  let [currentPosition, setCurrentPosition] = useState(0); 
  let departmentSlide = departmentSlides[currentPosition];
    
  //First build state of autoPlay and set value to true
  const [autoPlay, setAutoPlay] = useState(true); 
     
  useEffect(() => {
    // use setTimeOut instead of setInterval
    const interval = setTimeOut(() => {
      currentPosition !== departmentSlides.length - 1 // Check index length
        ? setCurrentPosition(currentPosition + 1)
        : setCurrentPosition((currentPosition = 0));
    }, 12000);
    //use if condition to checkout value of autoPlay
    if (autoPlay === false) {
        clearTimeout(interval)
    }
  });
    
  const goRight = () => {
    // change Value of autoPlay to false
    setAutoPlay(false);
    
    currentPosition !== departmentSlides.length - 1 // Check index length
      ? setCurrentPosition(currentPosition + 1)
      : setCurrentPosition((currentPosition = 0));
  };
    
  const goLeft = () => {
    // change Value of autoPlay to false
    setAutoPlay(false);
    currentPosition !== 0 // Check index length
      ? setCurrentPosition(currentPosition - 1)
      : setCurrentPosition((currentPosition = departmentSlides.length - 1));
  };
}