码农教程 - 一技在手,衣食无忧! tools

W3.JS HTML Slideshows

❮ Previous Next ❯

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:

Example

w3.slideshow(".nature", 0);
Try It Yourself »

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 »

❮ Previous Next ❯