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:

<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:

let 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.

Implement the described slider. Make the texts go in circles.

Modify the previous task so that the texts don't go in circles, but simply don't scroll further when they reach the extreme right or left position.