Text-Slider mit Pfeilen in JavaScript

Lassen Sie uns nun einen Text-Slider mit Pfeilen erstellen. Das bedeutet, dass sich der Text nicht per Timer, sondern durch Klicken auf einen Pfeil ändert. Fügen wir Pfeile zu unserem HTML-Code hinzu:

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

Die Hauptschwierigkeit bei der Lösung dieses Sliders liegt darin, dass die Zählvariable für die Texte für die Event-Handler unserer Pfeile gemeinsam sein muss:

let i = 0; // externe Variable

left.addEventListener('click', function() {
	// verringere i um 1
	// und gib den Text mit der Nummer i aus
});
right.addEventListener('click', function() {
	// erhöhe i um 1
	// und gib den Text mit der Nummer i aus
});

Und die zweite Schwierigkeit besteht darin, dass man, sowohl beim Verringern von i als auch beim Erhöhen, nicht in Zahlen kleiner als Null und größer als das letzte Element des Arrays gelangen darf.

Implementieren Sie den beschriebenen Slider. Sorgen Sie dafür, dass die Texte im Kreis laufen.

Modifizieren Sie die vorherige Aufgabe so, dass die Texte nicht im Kreis laufen, sondern einfach nicht weiter scrollen, wenn die äußerste rechte oder linke Position erreicht ist.