Подправить код слайдера для размещении на 1 странице 4 слайдеров
 

:help: Подправить код слайдера для размещении на 1 странице 4 слайдеров.

Я очень слабо в этом разбираюсь, вообщем поэтому и прошу помочь.

Вот код для размещения 2 слайдеров, как сделать что бы было для 4:



<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>


HTML:

<div class="slideshow-container">
<div class="mySlides1">
<img src="img_nature_wide.jpg" style="width:100%">
</div>

<div class="mySlides1">
<img src="img_snow_wide.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>

<div class="slideshow-container">
<div class="mySlides2">
<img src="img_band_chicago.jpg" style="width:100%">
</div>

<div class="mySlides2">
<img src="img_band_la.jpg" style="width:100%">
</div>


<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>