Textový slider se šipkami v JavaScriptu

Pojďme nyní vytvořit textový slider se šipkami. To znamená, že text se bude měnit ne podle časovače, ale kliknutím na šipku. Přidejme šipky do našeho HTML kódu:

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

Hlavní jemnost řešení tohoto slideru spočívá v tom, že proměnná-čítač textů musí být společná pro obslužné rutiny kliknutí našich šipek:

javascriptlet i = 0; // externí proměnná

left.addEventListener('click', function() {
  // snížíme i o 1
  // a vypíšeme text s číslem i
});
right.addEventListener('click', function() {
  // zvýšíme i o 1
  // a vypíšeme text s číslem i
});

A druhá jemnost spočívá v tom, že jak při snížení i, tak při zvýšení, nelze vyjít do čísel menších než nula a větších než poslední prvek pole.