title: mouseenter clearInterval() in vanila JS carousel
body: <p>I have an infinity carousel with 3 slides. I was able to separate functions with help. I want the function slider to stop when I put my mouse on this slide, and when I take my mouse off, it will work again.</p>
  <p><code>ClearInterval</code> was used through <code>addEventListner</code>, but it did not work. <code>ClearInterval (movement)</code> also did not work within the movement function.</p>
  <p>The last function I tested was this. What should I do to implement this function? <code>clearInterval(slider)</code> is not working</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function slider() {
          let slides = document.querySelectorAll(".slide"),
              slider = document.querySelector(".slider"),
              last = slider.lastElementChild,
              first = slider.firstElementChild,
              btn = document.querySelectorAll(".btn");
  
          slider.insertBefore(last, first);
  
          btn.forEach(btn =&gt; {
              btn.addEventListener("click", movement);
          });
  
          setInterval(function () {
              movement({
                  target: {
                      id: "next"
                  }
              });
          }, 8000);
  
          function movement(e) {
              slider = document.querySelector(".slider");
              last = slider.lastElementChild;
              first = slider.firstElementChild;
  
              const activeSlide = document.querySelector(".active");
  
              if (e.target.id === "next") {
                  slider.insertBefore(first, last.nextSibling);
  
                  activeSlide.classList.remove("active");
                  activeSlide.nextElementSibling.classList.add("active");
  
              } else {
                  slider.insertBefore(last, first);
                  activeSlide.classList.remove("active");
                  activeSlide.previousElementSibling.classList.add("active");
              }
  
          }
  
      }
      slider();
  
      let slides = document.querySelectorAll(".slide");
      for (i = 0; i &lt; slides.length; i++) {
          slides[i].mouseenter(function () {
              clearInterval(slider);
          }).mouseleave(function () {
              setInterval(function () {
                  movement({
                      target: {
                          id: "next"
                      }
                  });
              }, 8000);
          })
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  .slider {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 120px;
    margin: auto;
    overflow: hidden;
  }
  
  .slide {
    width: 100%;
    height: 300px;
    position: absolute;
    text-align: center;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
  
  .slide.active {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  
  .slide.active~.slide {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  
  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    text-align: center;
  }
  
  .slide {
    background: #222;
    color: white;
    padding: 30px;
  }
  
  button {
    margin-top: 20px;
    border: none;
    border-radius: 0;
    background: aliceblue;
    color: #333;
    padding: 10px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider__wrapper"&gt;
    &lt;div class="slider"&gt;
      &lt;div class="slide active"&gt;
        &lt;h3&gt;Slide One&lt;/h3&gt;
        &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;h3&gt;Slide Two&lt;/h3&gt;
        &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;h3&gt;Slide Three&lt;/h3&gt;
        &lt;p&gt;1234&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button id="prev" class="btn"&gt;Prev&lt;/button&gt;
    &lt;button id="next" class="btn"&gt;Next&lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>