title: Create a slider with arrow keys and with the mouse click
body: <p>How to pass slides with the keys without this repetition effect happening with the setInterval, when I have the mouse over the container and at the same time press the key to go through images</p>
  
  <p>this is the codepen <a href="https://codepen.io/AlainBarrios/pen/BPayXO?editors=0010" rel="nofollow noreferrer">https://codepen.io/AlainBarrios/pen/BPayXO?editors=0010</a></p>
  
  <p>The commented thing is the arrowKeys function that I did to move the images with the keys but it does not work at all well, a strange effect happens and I imagine that it has to do with the setInterval.</p>
  
  <pre><code>const arrowKeys = () =&gt; {
      window.addEventListener("keyup", e =&gt; {
          if (e.key === "ArrowLeft") {
              prevControl.click();
              return false
          } else if (e.key === "ArrowRight") {
              nextControl.click();
              return false
          }
      });
  };
  
  if (keyboard === "true") {
      arrowKeys();
  }
  </code></pre>