auto slider stops when mouse hovers over div -javascript

Enes Burak Elmal 0
Viewed 15

i have a auto slider on react app. i want the slide to stop when i hover over the div with the mouse.

i have a structure that turns true-false when mouse hovers over the div

here is my code template: https://codesandbox.io/s/nice-johnson-15xbl2?file=/src/App.js

here is my code:

export default function App() {
  const [slideIndex, setSlideIndex] = useState(1);
  const [onHover, setOnHover] = useState(false);

  const dataSlider = [
    {
      name: "Enes"
    },
    {
      name: "Burak"
    }
  ];

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex + 1);
    } else if (slideIndex === dataSlider.length) {
      setSlideIndex(1);
    }
  };

  setTimeout(() => {
    if (onHover === false) {
      nextSlide();
    }
  }, 3000);

  return (
    <>
      <div
        className="container-slider"
        onMouseEnter={() => setOnHover(true)}
        onMouseLeave={() => setOnHover(false)}
      >
        {dataSlider.map((obj, index) => {
          return (
            <>
              <div
                key={obj.id}
                className={
                  slideIndex === index + 1 ? "slide active-anim" : "slide"
                }
              >
                {obj.name}
              </div>
            </>
          );
        })}
      </div>
      {Array.from({ length: dataSlider.length }).map((item, index) => (
        <div
          key={index}
          style={{ cursor: " pointer" }}
          onClick={() => setSlideIndex(index + 1)}
          // className={slideIndex === index + 1 ? 'dots active' : 'dots'}
        >
          Slide {index}
        </div>
      ))}
    </>
  );
}

and css:

.container-slider {
  /* width: 1420px;
  margin: auto; */
  height: 620px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border: 1px solid red;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}

thanks for your time

reactjs javascript
1 Answers

You need to have a persistent reference to the interval created by setInterval. Use the useRef hook for this.

Check changes in the isHovering state with the useEffect hook. In the hook, check if isHovering is either true or false. Based on that state either start or stop the interval.

export default function App() {
  const [slideIndex, setSlideIndex] = useState(1);
  const [isHovering, setIsHovering] = useState(false);
  const interval = useRef(null);

  const dataSlider = [
    {
      name: "Enes"
    },
    {
      name: "Burak"
    }
  ];

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex + 1);
    } else {
      setSlideIndex(1);
    }
  };

  useEffect(() => {
    if (!isHovering) {
      interval.current.setInterval(() => {
        nextSlide();
      }, 3000);
    } else {
      clearInterval(interval.current);
      interval.current = null;
    }
  }, [isHovering]);

  return (
    <>
      <div
        className="container-slider"
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
      >
        {dataSlider.map((obj, index) => {
          return (
            <>
              <div
                key={obj.id}
                className={
                  slideIndex === index + 1 ? "slide active-anim" : "slide"
                }
              >
                {obj.name}
              </div>
            </>
          );
        })}
      </div>
      {Array.from({ length: dataSlider.length }).map((item, index) => (
        <div
          key={index}
          style={{ cursor: " pointer" }}
          onClick={() => setSlideIndex(index + 1)}
          // className={slideIndex === index + 1 ? 'dots active' : 'dots'}
        >
          Slide {index}
        </div>
      ))}
    </>
  );
}
Emiel Zuurbier0
Related