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 id="previous" class="change">previous</button>
<button id="latter" class="change">latter</button>

JavaScript

window.onload = function() {
  var slideIndex = 0;
  var stopslider = false;
  slider();
  
  function change(n) {
    stopslider = true;
    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";
  }
  
  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-------------------------
  document.getElementById("previous").onclick = function(){change(-1);};
  document.getElementById("latter").onclick = function(){change(+1);};
};