Tekstslider met pijlen in JavaScript
Laten we nu een tekstslider met pijlen maken. Dit betekent dat de tekst zal veranderen niet door een timer, maar door op een pijl te klikken. Laten we pijlen toevoegen aan onze HTML-code:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
De belangrijkste nuance van deze slider is dat de variabele-teller voor teksten gemeenschappelijk moet zijn voor de event handlers van onze pijlen:
let i = 0; // externe variabele
left.addEventListener('click', function() {
// verlaag i met 1
// en toon tekst met nummer i
});
right.addEventListener('click', function() {
// verhoog i met 1
// en toon tekst met nummer i
});
En de tweede nuance is dat, zowel bij het verlagen
i als bij het verhogen, je niet buiten
de getallen minder dan nul en meer dan het laatste element
van de array mag gaan.
Implementeer de beschreven slider. Zorg ervoor dat de teksten in een cirkel rondgaan.
Wijzig de vorige taak zo dat de teksten niet in een cirkel rondgaan, maar eenvoudigweg niet verder scrollen bij het bereiken van de uiterste rechter of linker positie.