How to Create a HTML Image Slideshow

by HTML

Creating a Slideshow using HTML

 

Having a good slideshow on your website can increase the user’s interest in the website and it might go through all content more attentively.

To create an image slider using HTML you first need to select the pictures you want in the slide. Make sure that all pictures are of the same size in storage.

1. Start with opening your favourite HTML editor I use sublime, you can download this for free here.

Once you have open sublime set it up ready to make a HTML site.

Example
<!DOCTYPE html>
<html>
<head>
  <title>slideshow</title>
</head>
<body>
</body>
</html>

2. Start with making a div with class of slide-container. This container div will contain all images.

Example
<!DOCTYPE html>
<html>
<head>
  <title>slideshow</title>
</head>
<body>
  <div class="slide-container"> 
  </div><!-- slide-container-end-->  
</body>
</html>

3. Inside the slide-container you will need another div with the class of slide, inside this div you will add the image and another div with the class of text.

To add more slide’s repeat this step.

Example
<!DOCTYPE html>
<html>
<head>
  <title>slideshow</title>
</head>
<body>
  <div class="slide-container">
    <div class="slide">
      <img src="images/slide-1.jpg">
        <div class="text">Slideshow 1</div>
    </div><!-- slide-1-end-->
	</div><!-- slide-container-end-->  
</body>
</html>

4. Next is to do the css, this is to syle the text and image sizes. Don’t forget to link the css inside the index.html file.

Example
body {
  font-family: Verdana, sans-serif;
}

.slide {
  display: none;
}

img {
  height: 500px;
  width: 100%
}


/* Slide container */
.slide-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

5. Next is to do the javascript, you can see the code in the following image. Don’t forget to link the java inside the index.html file.

Example
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < length; i++) {
    
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 5000); // Change image every 5 seconds
}

6. Now you have created a HTML Slideshow, you can change the speed of the slide inside javascript and don’t forget to link the files correctly.

Example
<!DOCTYPE html>
<html>
<head>
  <title>slideshow</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="slide-container">
    <div class="slide">
      <img src="images/slide-1.jpg">
        <div class="text">Slideshow 1</div>
    </div><!-- slide-1-end-->

    <div class="slide">
      <img src="images/slide-2.jpg">
        <div class="text">Slideshow 2</div>
    </div><!-- slide-2-end-->

    <div class="slide">
      <img src="images/slide-3.jpg">
        <div class="text">Slideshow 3</div>
    </div><!-- slide-3-end-->
  </div><!-- slide-container-end-->
</body>
<script src="js/java.js"></script>
</html>

7. In the index.html file right click and open in browser to test the slieshow is working. If you are having issues with getting this working you can email us at enquiries@asiadesign.co.uk