W3.CSS — Slideshow

Basic Slideshow

<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides" src="image1.jpg" style="width:100%">
    <img class="mySlides" src="image2.jpg" style="width:100%">
    <img class="mySlides" src="image3.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000);
}
</script>

Slideshow with Dots

<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides" src="image1.jpg" style="width:100%">
    <img class="mySlides" src="image2.jpg" style="width:100%">
    <img class="mySlides" src="image3.jpg" style="width:100%">
    
    <div class="w3-center w3-section w3-large w3-text-white" style="width:100%">
        <span class="w3-right w3-cursor-pointer" onclick="plusDivs(1)">&#10095;</span>
        <span class="w3-left w3-cursor-pointer" onclick="plusDivs(-1)">&#10094;</span>
    </div>
</div>

Slideshow Examples

<!-- Product gallery -->
<div class="w3-content w3-section" style="max-width:800px">
    <img class="mySlides" src="product1.jpg" style="width:100%">
    <img class="mySlides" src="product2.jpg" style="width:100%">
    <img class="mySlides" src="product3.jpg" style="width:100%">
</div>

<!-- Auto-playing slideshow -->
<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-fade" src="image1.jpg" style="width:100%">
    <img class="mySlides w3-animate-fade" src="image2.jpg" style="width:100%">
    <img class="mySlides w3-animate-fade" src="image3.jpg" style="width:100%">
</div>

Slideshow Controls

<!-- Navigation buttons -->
<div class="w3-center">
    <button class="w3-button w3-black" onclick="plusDivs(-1)">Previous</button>
    <button class="w3-button w3-black" onclick="plusDivs(1)">Next</button>
</div>

<!-- Dot indicators -->
<div class="w3-center">
    <span class="w3-badge w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic slideshow
2. Adds navigation buttons
3. Creates dot indicators
4. Uses auto-playing slideshow

Up Next

Next: Learn about W3.CSS Animations.