title: How to reverse infinite loop direction on hover
body: <p>I have made this infinite banner. So far, banner goes from right to left, and the loop pause while I hover the dot. What I need tho, is reversing banner direction while hovering the left dot (only that one).
  If I stop hovering, I need it to go back to its previous direction (not to its previous position), any help would be appreciated since I don't have many JS skills.
  Thank you</p>
  <p>JS</p>
  <pre><code>$(function () {
    var first = 0;
    var second = 100.0;
    var started = true;
    var move;
    const initialSpeed = 30
    const onHoverSpeed = 10
    let speedUp = false;
    let direction = 'left';
  
  
    function moveBanner() {
      move = setInterval(function () {
        first -= 0.1;
        second -= 0.1;
        if (first &lt;= -100.0) {
          first = 100;
        }
        if (second &lt;= -100.0) {
          second = 100;
        }
        $('.first').css('left', first + &quot;%&quot;);
        $('.second').css('left', second + &quot;%&quot;);
  
      }, 10);
    }
    moveBanner();
  
    $(&quot;.dot&quot;).hover(function () {
      speedUp = true;
      if(started) {
        clearInterval(move);
        started = false;
        if ($(this).hasClass('dot--left')){
          direction = 'right'
          console.log('left dot', 'should go:', direction);
        } else {
          direction = 'left';
          console.log('right dot', 'should go:' direction);
        }
      } else {
        speedUp = false;
        direction = 'left';
        console.log('should go:', direction)
        moveBanner();
        started = true;
      }
    });
  })
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;banner&quot;&gt;
      &lt;div class=&quot;dot dot--left&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;dot dot--right&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;loop first&quot;&gt;
        &lt;p&gt;
          Stuff here
        &lt;/p&gt;
    &lt;/div&gt;
     &lt;div class=&quot;loop second&quot;&gt;
        &lt;p&gt;
          Stuff here
        &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.banner {
     overflow: hidden;
     position: relative;
     height: 100vh;
  }
  
  .dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    z-index: 6;
    position: fixed;
    bottom: 65px;
    max-width: 140px;
  }
  
  .dot--right {
    right: 180px;
  }
  
  .dot--left {
    left: 180px;
  }
  
  .loop{
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      z-index: 5;
      color: yellow;
  }
  
  .first{
     background-color: red;
  }
  
  .second {
    background-color: blue;
    left: 100%;
  }
  </code></pre>