JSFiddle - React, Tailwind, and code Playground

HTML

<a class="slide" href="imagem1"><img src="https://placeimg.com/300/200/animals"></a>
<a class="slide" href="imagem2"><img src="https://placeimg.com/300/200/arch"></a>
<a class="slide" href="imagem3"><img src="https://placeimg.com/300/200/people"></a>
<a class="slide" href="imagem4"><img src="https://placeimg.com/300/200/tech"></a>

<button class="change" data-n="-1">previous</button>
<button class="change" data-n="+1">latter</button>

JavaScript

window.onload = function() {
  var slideIndex = 0;
  var stopslider = false;
  slider();
  
  function slider() {
    if (stopslider == false) {
      var s = document.getElementsByClassName("slide");
      for (var i=0; i<s.length; i++) {
        s[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > s.length) {
        slideIndex = 1;
      }
      s[slideIndex-1].style.display = "block";
      setTimeout(slider, 4000);
    }
  }
  
//CLICK-HANDLERS-------------------------
  (function() {
    var c = document.getElementsByClassName("change");
    for (var i=0; i<c.length; i++) {
      c[i].onclick = function() {
        stopslider = true;
        var n = parseInt(this.getAttribute("data-n"));
        var s = document.getElementsByClassName("slide");
        slideIndex += n;
        if (slideIndex > s.length) {
          slideIndex = 1;
        } else if (slideIndex < 1) {
          slideIndex = s.length;
        }
        for (var i=0; i<s.length; i++) {
          s[i].style.display = "none";
        }
        s[slideIndex-1].style.display = "block";
      };
    }
  })();
};