x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"><body><div class="w3-container"> <h2>Slideshow Indicators</h2> <p>Using images to indicate how many slides there are in the slideshow, and highlight the image the user is currently viewing.</p></div><div class="w3-content" style="max-width:1200px"> <img class="mySlides" src="img_nature_wide.jpg" style="width:100%;display:none"> <img class="mySlides" src="img_snow_wide.jpg" style="width:100%"> <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%;display:none"> <div class="w3-row-padding w3-section"> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(1)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_snow_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(2)"> </div> <div class="w3-col s4"> <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(3)"> </div> </div></div><script>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}