Member Avatar for 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

  • 2 Contributors
  • 1 Reply
  • 498 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

Quick answer: don’t hard-code 50+ <img> tags. let the server (or a build step) produce a manifest (JSON) of image URLs and have the page fetch that manifest, then render only the image(s) you need and preload a small number ahead. ’s AJAX idea is exactly right — the missing detail is how to generate the list on the server and how to limit client memory/network use.

A simple workflow:

  • server: return a JSON array of image URLs (either a small static manifest.json created at build time or a tiny script that lists a folder).
  • client: fetch that JSON, optionally shuffle it, and update a single <img> (or a pair of <img> for smooth crossfades). Preload only the next 1–3 images (new Image()). Don’t preload all 50+ at once.

Example server-side generator (PHP):

<?php
$dir = __DIR__ . '/images/couple';
$files = array_values(array_filter(scandir($dir), function($f) use ($dir) {
  return is_file($dir.'/'.$f) && preg_match('/\.(jpe?g|png|gif|webp)$/i',$f);
}));
sort($files);
$urls = array_map(function($f){ return 'images/couple/'.$f; }, $files);
header('Content-Type: application/json; charset=utf-8');
echo json_encode($urls);
?>

Example client logic (sketch):

fetch('/image-list.php').then(r=>r.json()).then(list=>{
  // shuffle (Fisher-Yates), keep index, set single <img id="slide"> src,
  // preload list[(idx+1)%n] with new Image(), and advance with setInterval.
  // pause on document.hidden and respect prefers-reduced-motion.
});

Notes, tips and cautions:

  • The browser cannot read server folders directly; you must expose filenames via an endpoint or manifest.
  • Use thumbnails/srcset or WebP to reduce bandwidth, only load full-size when needed.
  • Limit preloads to avoid memory spikes. For smooth fades use two stacked <img> elements and crossfade opacity via CSS.
  • Add alt text, keyboard controls and a pause button; respect prefers-reduced-motion and stop the slideshow when the tab is hidden (visibilitychange).
  • Troubleshooting: check Network/Console for 404s, case-sensitive filenames on Linux servers, and CORS if images are hosted on another domain.
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.