title: Carousel onmouseover and onmouseout does not work
body: <p>I am practising Javascript. I made an images carousel. My carousel slide works fine. To run the slide I used <code>setinterval</code>. When user will hover over the image, I want to stop the slide and when it will hover out then slide will start where it pause. For that I used <code>clearinterval</code>. When I <code>onmouseover</code> then <code>onmouseout</code> my carousel behave weird. Seems like my logic does not work. I don't know how to do that.</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>const images = document.getElementById('imgs')
  const allImages = document.querySelectorAll('#imgs img')
  let index = 0;
  function run() {
   
    index++;
    if (index &gt; allImages.length - 1) {
      index = 0
    }
  
    imgs.style.transform = `translateX(${-index * 500}px)`
  }
  
  setInterval(run, 2000);
  
  images.onmouseover = () =&gt; {
    console.log('In');
    clearInterval(run) + 1
  }
  images.onmouseout = () =&gt; {
    console.log('Out');
    setInterval(run, 2000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .carousel {
    overflow: hidden;
    width: 500px;
    height: 500px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
  }
  
  .image-container {
    display: flex;
   transition: transform 300ms linear;
   transform: translateX(0);
  }
  
  img {
    width:500px;
    height: 500px;
    object-fit: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="carousel"&gt;
      &lt;div class="image-container" id="imgs" &gt;
        &lt;img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt=""&gt;
        &lt;img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt=""&gt;
        &lt;img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt=""&gt;
        &lt;img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>