W3.CSS Slideshow
Manual / Automatic Slideshows
W3.CSS makes it easy to create manual and automatic slideshows.
Slides can contain images, text, captions, indicators, and animation classes.
Manual Slideshow
Example
Create several elements with the same class name:
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
Add buttons to move backward and forward:
<button class="w3-button w3-display-left"
onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right"
onclick="plusDivs(+1)">❯</button>
Use JavaScript to select which slide to display:
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
const slides = document.querySelectorAll(".mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
slides.forEach(slide => {
slide.style.display = "none";
});
slides[slideIndex - 1].style.display = "block";
}
Try It Yourself »
JavaScript Explained
The slideIndex variable stores the current slide number.
The plusDivs() function changes the slide number.
The showDivs() function hides all elements with the mySlides class, then displays the selected slide.
If the slide number moves past the last slide, it starts again at the first slide. If it moves before the first slide, it goes to the last slide.
Automatic Slideshow
To display an automatic slideshow is even simpler.
You only need a little different JavaScript:
Example
let slideIndex = 0;
carousel();
function carousel() {
const slides = document.querySelectorAll(".mySlides");
slides.forEach(slide => {
slide.style.display = "none";
});
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000);
}
Try It Yourself »
HTML Slides
The slides do not have to be images.
They can be any HTML content:
Slide 1
Lorem ipsum
Slide 2
Lorem ipsum
Slide 3
Lorem ipsum
Example
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the
moon in the 2020s</i></h1>
</div>
</div>
Try It Yourself »
Slideshow Caption
Add captions with on of the w3-display classes,
such as w3-display-bottomleft or w3-display-topright:
Example
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg"
style="width:100%">
<div class="w3-display-bottomleft w3-container
w3-padding-16 w3-black">
French Alps
</div>
</div>
Try It Yourself »
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
Example
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next
❯</button>
<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>
Try It Yourself »
Another example:
Example
<div class="w3-content w3-display-container">
<img class="mySlides"
src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div
class="w3-center w3-display-bottommiddle" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>
Try It Yourself »
Images as Indicators
An example of using images as indicators:
Example
<div class="w3-content" style="max-width:1200px">
<img class="mySlides"
src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_snow_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-grid w3-section"
style="grid-template-columns:repeat(3,1fr);gap:8px">
<img class="demo w3-opacity" src="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
<img class="demo w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(2)">
<img class="demo w3-opacity" src="img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
Try It Yourself »
Multiple Slideshows on the Same Page
To operate multiple slideshows on one page, you must class the members of each slideshow group with different classes:
Example
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg"
style="width:100%">
<img class="mySlides1" src="img_lights.jpg"
style="width:100%">
<img class="mySlides1" src="img_mountains.jpg"
style="width:100%">
<img class="mySlides1" src="img_forest.jpg"
style="width:100%">
</div>
<div class="w3-content">
<img
class="mySlides2" src="img_la.jpg" style="width:100%">
<img
class="mySlides2" src="img_ny.jpg" style="width:100%">
<img
class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
Try It Yourself »
Animated Slides
Use one of the w3-animate classes to slide or fade slideshow content.
Example
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides
w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
Try It Yourself »
Faded Animation
The w3-animate-fading class continuously fades an element in and out.
Example
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides
w3-animate-fading" src="img_02.jpg">
<img class="mySlides
w3-animate-fading" src="img_03.jpg">
<img class="mySlides
w3-animate-fading" src="img_04.jpg">
Try It Yourself »
