Tekstslider med pile i JavaScript
Lad os nu lave en tekstslider med pile. Det betyder, at teksten skifter ikke ved en timer, men ved at klikke på en pil. Lad os tilføje pile til vores HTML-kode:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
Hovedfinessen ved løsningen af denne slider er, at variablen-tælleren for tekster skal være fælles for vores piles klik-håndteringer:
let i = 0; // ekstern variabel
left.addEventListener('click', function() {
// reducer i med 1
// og udskriv tekst med nummer i
});
right.addEventListener('click', function() {
// forøg i med 1
// og udskriv tekst med nummer i
});
Og den anden finesse er, at både ved reduktion
i og forøgelse, kan man ikke komme
ud i tal mindre end nul og større end det sidste element
i arrayet.
Implementer den beskrevne slider. Gør sådan, at teksterne cirkulerer.
Modificer den foregående opgave, sådan at teksterne ikke cirkulerer, men simpelthen ikke bliver scrollet videre, når den yderste højre eller venstige position er nået.