Несколько слайд-шоу на одной странице с ошибкой с jQuery - некоторые изображения исключены

Question

Я создал слайд-шоу с помощью jQuery, однако по некоторым причинам некоторые изображения в слайд-шоу не скользят, как они должны. Например: если в слайд-шоу 1 есть 5 изображений, оно покажет только первые два изображения и прокрутит их.

Вот HTML:

<div class="this_page">
        <div class="container band_1">
            <div class="sub_container">
                <img class="mySlides1" src="../art/photo-12.jpg">
                <img class="mySlides1" src="../art/photo-13.jpg">
                <img class="mySlides1" src="../art/photo-10.jpg">
                <img class="mySlides1" src="../art/photo-14.jpg">
                <img class="mySlides1" src="../art/photo-11.jpg">
                <img class="mySlides1" src="../art/photo-15.jpg">
                <button class="button left" onclick="plusDivs(-1, 0)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 0)">&#10095;</button>         
            </div>
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
        </div>


        <div class="container band_2">
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
            <div class="sub_container">
                <img class="mySlides2" src="../art/photo-21.jpg">
                <img class="mySlides2" src="../art/photo-22.jpg">
                <img class="mySlides2" src="../art/photo-20.jpg">
                <img class="mySlides2" src="../art/photo-23.jpg">
                <img class="mySlides2" src="../art/photo-24.jpg">
                <button class="button left" onclick="plusDivs(-1, 1)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 1)">&#10095;</button>         
            </div>
        </div>


        <div class="container band_1">
            <div class="sub_container">
                <img class="mySlides3" src="../art/photo-16.jpg">
                <img class="mySlides3" src="../art/photo-17.jpg">
                <img class="mySlides3" src="../art/photo-18.jpg">
                <button class="button left" onclick="plusDivs(-1, 2)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 2)">&#10095;</button>         
            </div>
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
        </div>

        <div class="container band_2">
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
            <div class="sub_container">
                <img class="mySlides4" src="../art/photo-25.jpg">
                <img class="mySlides4" src="../art/photo-26.jpg">
                <img class="mySlides4" src="../art/photo-27.jpg">
                <img class="mySlides4" src="../art/photo-28.jpg">
                <img class="mySlides4" src="../art/photo-29.jpg">
                <button class="button left" onclick="plusDivs(-1, 3)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 3)">&#10095;</button>         
            </div>
        </div>


    </div>

И JQuery:

var slideIndex = [1,3];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
showDivs(1, 3);

function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
}

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

Любая помощь будет высоко ценится!

P.s. Еще один вопрос: какой размер файла jpegs лучше всего подходит для веб-сайтов?

Answer 1

Попробуйте изменить индекс var на:

var slideIndex = [1,1,1,1];