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

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

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

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

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

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

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

Реализирайте описания слайдер. Направете така, че текстовете да се движат в кръг.

Модифицирайте предходната задача така, че текстовете да не се движат в кръг, а просто да не се прокручват по-нататък при достигане на крайно дясно или ляво положение.