Tag Archives: slideshow

Automatic image slideshow

If you would like to display several images on a webpage, rather than making the user scroll down the page to see a lot of separate images, you can add an effective image slideshow which cycles through several images without making your user leave their position on the page.

Take a look at the example below which cycles through three images and then repeats the slideshow.

slides

If you would like to add an image slideshow to your page then you can use the code below. You can modify the code if you’d like to add transition effects (eg. fade) or navigation buttons (eg. pause, back, forward).

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <style>
    .slides{
      display:none;
    }
  </style>
</head>
<body>
  <div class="slideshow_div" style="max-width:500px">
    <img class="slides" src="image1.jpg" style="width:100%">
    <img class="slides" src="image2.jpg" style="width:100%">
    <img class="slides" src="image3.jpg" style="width:100%">
  </div>
  <script type="text/javascript">
    var myIndex = 0;
    slideshow();

    function slideshow(){
      var item;
      var slides = document.getElementsByClassName("slides");
      for(item=0; item<slides.length; item++){
        slides[item].style.display = "none";
      }
      myIndex++;
      if(myIndex > slides.length){
        myIndex = 1;
      }
      slides[myIndex-1].style.display = "block";
      setTimeout(slideshow,4000);
    }
  </script>
</body>
</html>

This code is free for you to use and modify as you wish.