W3.JS HTML Slideshows
Start slideshow:
w3.slideshow(selector, interval (milliseconds))
Example
<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>
Try It Yourself »
No Autostart
To prevent the slideshow from starting automatically, set the interval parameter to 0:
Next Slide
Add buttons to browse through the slideshow:
When you initiate a slideshow, the w3.slideshow() function returns an object representing the slideshow.
var
myShow = w3.slideshow(".nature", 0);
The slideshow object contain properties and methods, such as next() and previous():
Example
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
Try It Yourself »
More Slideshows
Any HTML element can be included in a slideshow.
Define which, by using CSS selectors.
Example
Headers:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>
Try It Yourself »
With CSS »
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.