New wiki-page
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
<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" style="max-width:800px"> | |||
{{#widget:Britain|highlight=#Salisbury, #Bedegraine}} | {{#widget:Britain|highlight=#Salisbury, #Bedegraine}} | ||
{{#widget:Britain|highlight=#Salisbury}} | |||
{{#widget:Britain|highlight=#Cornwall}} | |||
</div> | |||
<div class="w3-center"> | |||
<div class="w3-section"> | |||
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> | |||
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> | |||
</div> | |||
<button class="w3-button demo" onclick="currentDiv(1)">1</button> | |||
<button class="w3-button demo" onclick="currentDiv(2)">2</button> | |||
<button class="w3-button demo" onclick="currentDiv(3)">3</button> | |||
</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-red", ""); | |||
} | |||
x[slideIndex-1].style.display = "block"; | |||
dots[slideIndex-1].className += " w3-red"; | |||
} | |||
</script> |
Revision as of 22:56, 21 July 2017
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.
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
<button class="w3-button demo" onclick="currentDiv(1)">1</button> <button class="w3-button demo" onclick="currentDiv(2)">2</button> <button class="w3-button demo" onclick="currentDiv(3)">3</button>
<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-red", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-red";
} </script>