Slider de texto com setas em JavaScript

Agora vamos fazer um slider de texto com setas. Isso significa que o texto mudará não por um temporizador, mas ao clicar em uma seta. Vamos adicionar setas ao nosso código HTML:

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

A principal sutileza da solução deste slider é que a variável contadora de textos deve ser comum para os manipuladores de clique de nossas setas:

javascriptlet i = 0; // variável externa

left.addEventListener('click', function() {
  // diminui i em 1
  // e exibe o texto com o número i
});
right.addEventListener('click', function() {
  // aumenta i em 1
  // e exibe o texto com o número i
});

E a segunda sutileza é que, tanto ao diminuir i, quanto ao aumentar, não se pode sair para números menores que zero e maiores que o último elemento do array.