Text slider with arrows in JavaScript

Let's now make a text slider with arrows. This means that the text will change not by the timer, but by clicking on the arrow. Let's add arrows to our HTML code:

html<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>

The main solution subtlety of this slider is that the text counter variable should be common for the click handlers of our arrows:

javascriptlet i = 0; // the external variable

left.addEventListener('click', function() {
  // decrease i by 1
  // and display text with number i
});
right.addEventListener('click', function() {
  // increase i by 1
  // and display text with number i
});

And the second subtlety is that both with decreasing i, and with increasing, you can't reach numbers less than zero and greater than the last element of the array.