我在多张幻灯片中使用了旋转木马幻灯片

Question

我为我的多张幻灯片使用了旋转木马幻灯片代码JS，css和html问题而不是在第二张幻灯片等待之前幻灯片将在同一页面等待第一张幻灯片的同时播放第一张幻灯片在播放之前完成

HTML page---->>

<section id="section">
        <div class="w3-content w3-section" style="max-width:500px">
            <img class="mySlides" src="slides/slide1.JPEG" style="width:100%">
            <img class="mySlides" src="slides/slide2.JPEG" style="width:100%">
            <img class="mySlides" src="slides/slide3.JPEG" style="width:100%">
            <img class="mySlides" src="slides/slide4.JPEG" style="width:100%">
        </div>
</section>

JS ---->>>

<script>
            var myIndex = 0;
            carousel();

            function carousel() {
            var i;
            var x = document.getElementsByClassName("slideShow");
            for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";  
            }
            myIndex++;
            if (myIndex > x.length) {myIndex = 1}    
            x[myIndex-1].style.display = "block";  
            setTimeout(carousel, 2000); // Change image every 2 seconds
            }
        </script>