Diaporamas HTML W3.JS
Lancer le diaporama:
w3.slideshow(selector, interval (milliseconds))
Exemple
<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>
Pas de démarrage automatique
Pour empêcher le diaporama de démarrer automatiquement, définissez le paramètre d'intervalle sur 0 :
Exemple
w3.slideshow(".nature", 0);
Diapositive suivante
Ajoutez des boutons pour parcourir le diaporama :
Lorsque vous lancez un diaporama, la fonction w3.slideshow() renvoie un objet représentant le diaporama.
var
myShow = w3.slideshow(".nature", 0);
L'objet diaporama contient des propriétés et des méthodes, telles que next() et previous() :
Exemple
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
Plus de diaporamas
Tout élément HTML peut être inclus dans un diaporama.
Définissez lequel, en utilisant les sélecteurs CSS.
Exemple
En-têtes :
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>