Curseur de texte avec flèches en JavaScript

Maintenant, créons un curseur de texte avec des flèches. Cela signifie que le texte changera non pas par une minuterie, mais en cliquant sur une flèche. Ajoutons des flèches à notre code HTML :

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

La principale subtilité de la résolution de ce curseur est que la variable compteur de textes doit être commune aux gestionnaires de clics de nos flèches :

let i = 0; // variable externe

left.addEventListener('click', function() {
	// diminuer i de 1
	// et afficher le texte avec le numéro i
});
right.addEventListener('click', function() {
	// augmenter i de 1
	// et afficher le texte avec le numéro i
});

Et la deuxième subtilité est que, que ce soit lors de la diminution i, ou de l'augmentation, on ne peut pas sortir vers des nombres inférieurs à zéro et supérieurs au dernier élément du tableau.

Implémentez le curseur décrit. Faites en sorte que les textes bouclent en continu.

Modifiez la tâche précédente pour que les textes ne bouclent pas en continu, mais s'arrêtent simplement après avoir atteint la position la plus à droite ou la plus à gauche.