Line 4: | Line 4: | ||
<title> <strong> <b> Amandeep Varia's Wiki <b> </strong> </title> | <title> <strong> <b> Amandeep Varia's Wiki <b> </strong> </title> | ||
</head> | </head> | ||
+ | <head> | ||
− | < | + | <div class="w3-container"> |
− | < | + | <h2>Slideshow Indicators</h2> |
− | <p> | + | <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p> |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | <div class="w3-content w3-display-container" style="max-width:800px"> | |
− | + | <img class="mySlides" src="img_nature_wide.jpg" style="width:100%"> | |
+ | <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"> | ||
+ | <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%"> | ||
+ | <div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%"> | ||
+ | <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> | ||
+ | <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> | ||
+ | <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> | ||
+ | <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> | ||
+ | <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <script> | |
− | + | var slideIndex = 1; | |
− | + | showDivs(slideIndex); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function plusDivs(n) { | |
− | + | showDivs(slideIndex += n); | |
− | + | } | |
− | </ | + | function currentDiv(n) { |
+ | showDivs(slideIndex = n); | ||
+ | } | ||
+ | |||
+ | function showDivs(n) { | ||
+ | var i; | ||
+ | var x = document.getElementsByClassName("mySlides"); | ||
+ | var dots = document.getElementsByClassName("demo"); | ||
+ | if (n > x.length) {slideIndex = 1} | ||
+ | if (n < 1) {slideIndex = x.length} | ||
+ | for (i = 0; i < x.length; i++) { | ||
+ | x[i].style.display = "none"; | ||
+ | } | ||
+ | for (i = 0; i < dots.length; i++) { | ||
+ | dots[i].className = dots[i].className.replace(" w3-white", ""); | ||
+ | } | ||
+ | x[slideIndex-1].style.display = "block"; | ||
+ | dots[slideIndex-1].className += " w3-white"; | ||
+ | } | ||
+ | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 10:54, 26 July 2016
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
❮
❯