Control deslizante de texto con flechas en JavaScript

Ahora hagamos un control deslizante de texto con flechas. Esto significa que el texto cambiará no por un temporizador, sino al hacer clic en una flecha. Agreguemos flechas a nuestro código HTML:

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

El principal detalle de la solución de este control deslizante es que la variable contadora de textos debe ser común para los manejadores de clics de nuestras flechas:

let i = 0; // variable externa

left.addEventListener('click', function() {
	// disminuir i en 1
	// y mostrar el texto con el número i
});
right.addEventListener('click', function() {
	// aumentar i en 1
	// y mostrar el texto con el número i
});

Y el segundo detalle es que tanto al disminuir i, como al aumentarlo, no se puede salir a números menores que cero y mayores que el último elemento del array.

Implemente el control deslizante descrito. Hágalo de manera que los textos circulen.

Modifique la tarea anterior para que los textos no circulen, sino que simplemente no se desplacen más allá al alcanzar la posición extrema derecha o izquierda.