Animate Fading Slideshow with A lot Images

[gahhon]

<div class="w3-content w3-section" style="max-width:500px">
                    <!-- Photos to shows -->
                    <img class="mySlides w3-animate-fading" src="images/couple/Couple_1.jpg" style="width:100%">
                    <img class="mySlides w3-animate-fading" src="images/couple/Couple_2.jpg" style="width:100%">
                </div>

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

                    function carousel() {
                        var i;
                        var x = document.getElementsByClassName("mySlides");
                        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, 9000);    
                    }
                </script>               

This is work fine if only few images,
what if I want to slide like 50+ images, is the anyway to simplify the code like doing the for-loop instead of keep adding the image tag.
Or it could be like read the images from a folder and randomly display.
Any advise? Because I couldn't find any relevent keyword to search online.
Thanks

[pixelsoul]

Like you've hinted at, loading a bunch of images can pose a problem. I think this would usually be handled using AJAX with a backend, that loads the images asynchronously. The JS script would use AJAX retrieve the image(s), and then push those images into the DOM as needed. This would keep from all of your images being loaded all at one time.

A quick Google search "loading gallery images asynchronously" would probably provide a good start, and get the ball rolling.