W3CSS Slideshow

Slideshow or carousel is one of the most important element of any modern website. A carousel or slideshow is a set of images, that manually or automatically appear one by one on the screen in the form of a slide show. It is very easy to create a slideshow affect via W3CSS slideshow classes.

Creating Manual W3CSS Slideshow

The first step is to wrap all the images inside a div with class “w3-content” and “w3-display-container” class. The next step is to create two buttons. One for moving the slides backwards and the other for moving the slide forward. Also, some JavaScript code is required to make slideshow work.

Initially, take a variable and assign it a value of “1” and call showDivs function. Pass the variable to this showDivs function. Each image has a class “AllSlides”. The “showDiv” JavaScript function will get all the images with class “AllSlides” and then display the slide whose index is currently passed to it. If the index is greater than the number of slides the index will be set to 1. If the index is less than zero, it will be set to the number of index i.e. the index of the last slide. On each next click, the index is incremented and showDivs function is called. Similarly, on each back click, the index is decremented and again showDivs fuction is called. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


    
<div class="w3-content w3-display-container">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/c76/inside-castle-1056995.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/bda/grill-1056427.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7ea/barbeque-1325699.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7c9/barbeque-on-my-mind-1329952.jpg" style="width:100%">

  <button class="w3-button w3-yellow w3-display-left" onclick="changeDivs(-1)">&#10094;</button>
  <button class="w3-button w3-yellow w3-display-right" onclick="changeDivs(1)">&#10095;</button>
</div>

<script>
var slideNum = 1;
showDivs(slideNum );

function changeDivs(i) {
  showDivs(slideNum  += i);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("AllSlides");
  if (n > x.length) {slideNum  = 1}    
  if (n < 1) {slideNum  = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideNum -1].style.display = "block";  
}
</script>


</body>
    
</html>

Download the code Try the code

Creating Automatically Moving Carousel

The process of creating automatically moving slideshow is similar to example1. However, in this case there is no need of next and previous buttons. Rather there will be a timer inside JavaScript function which will recursively call itself after every two seconds and will update the slide. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-content w3-display-container">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/c76/inside-castle-1056995.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/bda/grill-1056427.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7ea/barbeque-1325699.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7c9/barbeque-on-my-mind-1329952.jpg" style="width:100%">

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

function slideShow() {
    var i;
    var x = document.getElementsByClassName("AllSlides");
    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(slideShow, 2000); // Change image every 2 seconds
}
</script>


</body>
    
</html>

Download the code Try the code

<<< W3CSS Effects
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .