Текстови слайдер със стрелки на JavaScript

Нека сега направим текстов слайдер със стрелки. Това означава, че текстът ще се променя не чрез таймер, а при кликване върху стрелка. Нека добавим стрелки в нашия HTML код:

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

Основната тънкост на решението за този слайдер е, че променливата-брояч на текстовете трябва да е обща за обработчиците на кликовете на нашите стрелки:

javascriptlet i = 0; // външна променлива

left.addEventListener('click', function() {
  // намаляваме i с 1
  // и извеждаме текст с номер i
});
right.addEventListener('click', function() {
  // увеличаваме i с 1
  // и извеждаме текст с номер i
});

А втората тънкост е, че както при намаляване i, така и при увеличаване, не може да се излезе в числа по-малки от нула и по-големи от последния елемент на масива.