How to run multiple JavaScript sliders on a single page?

问题

I am very new in JavaScript. I have multiple sliders on a single screen. You can see by going on this link: http://iliachtida.sportpolis.gr/play-unit/#

I am running a slider when click on the current product, but my slider behavior goes wrong when I click on the arrow.

When I click on the arrow only one product image is displayed, all the other images are not displayed.

I want to run different sliders for different products. Suppose I have four products on this screen and every product has four images. I want to run first product images on first product arrow click, second product images on second product arrow click, etc. I hope you understand.

I have tried many code, but it does not work for me.

This is my code:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("size-full");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) 
  {
      //alret(slideIndex);
      slides[i].style.display = "none";  
  }
  /*for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }*/
  slides[slideIndex-1].style.display = "block";  
  //dots[slideIndex-1].className += " active";
}

来源：https://stackoverflow.com/questions/61043216/how-to-run-multiple-javascript-sliders-on-a-single-page