New wiki-page
Jump to navigation Jump to search
(Created page with "<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...")
 
mNo edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="w3-container">
<style>
  <h2>Slideshow Indicators</h2>
.mySlides {display:none;}
  <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>
</style>
</div>
 
<div class="w3-content" style="max-width:800px">
{{#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>
<script>
var slideIndex = 1;
var slideIndex = <!--{$firstslide}-->;
showDivs(slideIndex);
showDivs(slideIndex);



Latest revision as of 12:16, 22 July 2017

<style> .mySlides {display:none;} </style>

<script> var slideIndex = ; 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>