javascript - Stop the loop on hover and show respective image and on mouse out continue the loop

Question

I'm trying to create a loop of images that when you hover over a div, it shows the relevant image index wise, so for example, if you hover over the 1st div, the 1st image should show and the cycle stops, when you hover over none of the divs the mouse leaves, the cycle then starts again. Loop is working fine but the image is not showing index wise. kindly help me out.

            let faders = document.querySelectorAll(".faders");
            let option = document.querySelectorAll(".fianance-options");
            let pauser1 = document.querySelector(".option-1");
            let pauser2 = document.querySelector(".option-2");
            let pauser3 = document.querySelector(".option-3");
            let pauser4 = document.querySelector(".option-4");

            faders.forEach((fader) => {
          rotateChildren(fader);
              pauser1.addEventListener("mouseover", () => {
                fader.dataset.pause = true;
            });
          pauser1.addEventListener("mouseout", () => {
                delete fader.dataset.pause;
                rotateChildren(fader);
              });
              pauser2.addEventListener("mouseover", () => {
                fader.dataset.pause = true;
              });
              pauser2.addEventListener("mouseout", () => {
                delete fader.dataset.pause;
                rotateChildren(fader);
            });
              pauser3.addEventListener("mouseover", () => {
                fader.dataset.pause = true;
              });
              pauser3.addEventListener("mouseout", () => {
                delete fader.dataset.pause;
                rotateChildren(fader);
            });
              pauser4.addEventListener("mouseover", () => {
                fader.dataset.pause = true;
              });
            pauser4.addEventListener("mouseout", () => {
                delete fader.dataset.pause;
              rotateChildren(fader);
          });
    });;
          
           function rotateChildren(container) {
        let idx = parseInt(container.dataset.index);
        container.children.item(idx).classList.add("show");
        setTimeout(() => {
          if (container.dataset.pause) return;
        container.children.item(idx).classList.remove("show");
        idx++;
        if (idx >= container.children.length) idx = 0;
          container.dataset.index = idx;
          rotateChildren(container);
        }, 5000);
          }

.faders {
  position: relative;
  display: inline-block;
  margin: 1em;
  width: 200px;
  height: 200px;
}

.faders img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  opacity: 0;
  transition: opacity 3s;
}

.faders .show {
  opacity: 1;
}

.option {
  margin: 1em;
  padding: 2em 1em;
  background-color: #444;
  color: #ddd;
  font-family: sans-serif;
}

<div class="faders" data-index="0">
  <img src="https://picsum.photos/200?random=1" alt="" />
  <img src="https://picsum.photos/200?random=2" alt="" />
  <img src="https://picsum.photos/200?random=3" alt="" />
  <img src="https://picsum.photos/200?random=4" alt="" />
</div>

<div class="option-1 option">Optional Pauser</div>
<div class="option-2 option">Optional Pauser</div>
<div class="option-3 option">Optional Pauser</div>
<div class="option-4 option">Optional Pauser</div>

Answer 1

等待大神答复