Textslider med pilar i JavaScript
Låt oss nu göra en textslider med pilar. Det betyder att texten kommer att ändras inte via en timer, utan genom att klicka på en pil. Låt oss lägga till pilar i vår HTML-kod:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
Den huvudsakliga finessen i lösningen av denna slider är att variabeln-räknaren för texter måste vara gemensam för våra pilers klickhanterare:
let i = 0; // extern variabel
left.addEventListener('click', function() {
// minska i med 1
// och visa text med nummer i
});
right.addEventListener('click', function() {
// öka i med 1
// och visa text med nummer i
});
Och den andra finessen är att både när man minskar
i, och när man ökar, kan man inte gå
till tal mindre än noll och större än det sista elementet
i arrayen.
Implementera den beskrivna slidern. Gör så att texterna går i cirkel.
Modifiera den föregående uppgiften så att texterna inte går i cirkel, utan helt enkelt inte scrollas längre när de når det yttersta högra eller vänstra läget.