W3.JS HTML-diavoorstellingen
Begin diavoorstelling:
w3.slideshow(selector, interval (milliseconds))
Voorbeeld
<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
Geen autostart
Om te voorkomen dat de diavoorstelling automatisch start, stelt u de intervalparameter in op 0:
Voorbeeld
w3.slideshow(".nature", 0);
Volgende dia
Voeg knoppen toe om door de diavoorstelling te bladeren:
Wanneer u een diavoorstelling start, retourneert de functie w3.slideshow() een object dat de diavoorstelling vertegenwoordigt.
var
myShow = w3.slideshow(".nature", 0);
Het object diavoorstelling bevat eigenschappen en methoden, zoals next() en previous():
Voorbeeld
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
Meer diavoorstellingen
Elk HTML-element kan in een diavoorstelling worden opgenomen.
Definieer welke met behulp van CSS-selectors.
Voorbeeld
Kopteksten:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>