Szövegcsúszka nyilakkal JavaScriptben

Most készítsünk egy szövegcsúszkát nyilakkal. Ez azt jelenti, hogy a szöveg nem időzítő alapján fog változni, hanem a nyilra kattintásra. Adjuk hozzá a nyilakat a HTML kódunkhoz:

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

Ennek a csúszkának a megoldásának fő csínjája az, hogy a szövegek számláló változójának közösnek kell lennie a nyilaink kattintáskezelői számára:

javascriptlet i = 0; // külső változó

left.addEventListener('click', function() {
  // csökkentjük i-t 1-gyel
  // és kiírjuk az i-edik szöveget
});
right.addEventListener('click', function() {
  // növeljük i-t 1-gyel
  // és kiírjuk az i-edik szöveget
});

A másik csínja pedig az, hogy mind a csökkentés, mind a növelés során nem léphetünk ki a nullánál kisebb számokba és a tömb utolsó eleménél nagyobb számokba.