<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%">

                    var myIndex = 0;

                    function carousel() {
                        var i;
                        var x = document.getElementsByClassName("mySlides");
                        for (i = 0; i < x.length; i++) {
                            x[i].style.display = "none";  
                        if (myIndex > x.length) {myIndex = 1}    
                            x[myIndex-1].style.display = "block";  
                        setTimeout(carousel, 9000);    

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.

10 Months
Discussion Span
Last Post by 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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.