JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider_wrapper">
  <a id="prev"><img src="/img/slides/prev.min.png" alt="prev"></a>
  
  <div class="myslide">
    <div class="slider_item pack_1"><img src="img/slides/1.png" alt="1"></div>
    <div class="slider_item pack_1"><img src="img/slides/2.png" alt="2"></div>
    <div class="slider_item pack_1"><img src="img/slides/3.png" alt="3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_2"><img src="img/slides/7.png" alt="8"></div>
    <div class="slider_item pack_2"><img src="img/slides/8.png" alt="sl"></div>
    <div class="slider_item pack_2"><img src="img/slides/9.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_3"><img src="img/slides/13.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/14.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/15.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_4"><img src="img/slides/17.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/18.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/19.png" alt="sl"></div>
  </div>  

  <a id="next"><img src="/img/slides/next.min.png" alt="next"></a>
</div>

CSS

.slider_wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide {
  display: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide img {
  margin-right: 15px;
  margin-left: 15px;
}
.slider_wrapper a {
  cursor: pointer;
}

JavaScript

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);

});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
});

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
 
    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";    
  }

 let timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
  },5000);