My JavaScript function is reading all 6 total images and not 3 on mobile and 3 when desktop. My hidden-mobile and hidden-desktop CSS classes work totally fine and hide the images making the carousel scroll through all 6, showing three and other three blank. I'm very confused.

The HTML:

     <div class="parent hidden-mobile">
            <div class="mySlides fade image2">
                <img src="img/homebanner1.png" style="width:100%">
            </div>
            <div class="mySlides fade image2">
                <img src="img/homebanner2.png" style="width:100%">
            </div>
            <div class="mySlides fade image2">
                <img src="img/homebanner3.png" style="width:100%">
            </div>
        </div>

        <div class="parent hidden-desktop">
            <div class="mySlides fade image2">
                <img src="img/homebannermobile1.png" style="width:100%">
            </div>
            <div class="mySlides fade image2">
                <img src="img/homebannermobile2.png" style="width:100%">
            </div>
            <div class="mySlides fade image2">
                <img src="img/homebannermobile3.png" style="width:100%">
            </div>
        </div>

Javascript:

    var slideIndex = 0;
    showSlides();
    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for(i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        }
        slideIndex++;
        if(slideIndex > slides.length) {
        slideIndex = 1
        }
        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 10000); // Change image every 10 seconds
    }