title: How do I pick images from folder and display in HTML?
body: <p>I am trying to create a image slideshow. Presently I write a simple code to display images. Now when I add new images to the same folder I have to again update the code for displaying the new image. How do I make it dynamic so that the code automatically picks the image and displays in the HTML page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;div class="slideshow-container"&gt;
  
      &lt;div class="mySlides fade"&gt;
        &lt;img src="img_nature_wide.jpg" style="width:100%"&gt;
      &lt;/div&gt;
  
      &lt;div class="mySlides fade"&gt;
        &lt;img src="img_snow_wide.jpg" style="width:100%"&gt;
      &lt;/div&gt;
  
      &lt;div class="mySlides fade"&gt;
        &lt;img src="img_mountains_wide.jpg" style="width:100%"&gt;
      &lt;/div&gt;
  
      &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
      &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
  
    &lt;/div&gt;
    &lt;br&gt;
  
    &lt;div style="text-align:center"&gt;
      &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
      var slideIndex = 1;
      showSlides(slideIndex);
  
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
  
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
  
      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n &gt; slides.length) {
          slideIndex = 1
        }
        if (n &lt; 1) {
          slideIndex = slides.length
        }
        for (i = 0; i &lt; slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i &lt; dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
      }
    &lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>