x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="4/w3.css"><style>.mySlides {display:none}.w3-left, .w3-right, .w3-badge {cursor:pointer}.w3-badge {height:13px;width:13px;padding:0}</style><body><div class="w3-container"> <h2>Slideshow Indicators</h2> <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_snow_wide.jpg" style="width:100%"> <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%"> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> <div class="w3-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);}