read images from folder and view html

Solutions on MaxInterview for read images from folder and view html by the best coders in the world

showing results for - "read images from folder and view html"

09 Aug 2020

1<body>
2
3  <div class="slideshow-container">
4
5    <div class="mySlides fade">
6      <img src="img_nature_wide.jpg" style="width:100%">
7    </div>
8
9    <div class="mySlides fade">
10      <img src="img_snow_wide.jpg" style="width:100%">
11    </div>
12
13    <div class="mySlides fade">
14      <img src="img_mountains_wide.jpg" style="width:100%">
15    </div>
16
17    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
18    <a class="next" onclick="plusSlides(1)">&#10095;</a>
19
20  </div>
21  <br>
22
23  <div style="text-align:center">
24    <span class="dot" onclick="currentSlide(1)"></span>
25    <span class="dot" onclick="currentSlide(2)"></span>
26    <span class="dot" onclick="currentSlide(3)"></span>
27  </div>
28
29  <script>
30    var slideIndex = 1;
31    showSlides(slideIndex);
32
33    function plusSlides(n) {
34      showSlides(slideIndex += n);
35    }
36
37    function currentSlide(n) {
38      showSlides(slideIndex = n);
39    }
40
41    function showSlides(n) {
42      var i;
43      var slides = document.getElementsByClassName("mySlides");
44      var dots = document.getElementsByClassName("dot");
45      if (n > slides.length) {
46        slideIndex = 1
47      }
48      if (n < 1) {
49        slideIndex = slides.length
50      }
51      for (i = 0; i < slides.length; i++) {
52        slides[i].style.display = "none";
53      }
54      for (i = 0; i < dots.length; i++) {
55        dots[i].className = dots[i].className.replace(" active", "");
56      }
57      slides[slideIndex - 1].style.display = "block";
58      dots[slideIndex - 1].className += " active";
59    }
60  </script>
61
62</body>