Home » » How to create a slideshow for website

How to create a slideshow for website

Written By Ruhul on Saturday

slideshow for website


If you want to create a simple image changing slideshow in your web page with very easy steps then follow the below instructions:
 <!DOCTYPE html>  
 <html>  
      <head>  
                <link rel="stylesheet" href="style.css"/>  
      </head>  
      <body>  
           <div id="slideshow">  
                <img class="slide" src="img/01.jpg">  
                <img class="slide" src="img/02.jpg">  
                <img class="slide" src="img/03.jpg">  
           </div>  
           <script>  
  var slideIndex = 0;  
  carousel();  
 function carousel() {  
   var i;  
   var x = document.getElementsByClassName("slide");  
   for (i = 0; i < x.length; i++) {  
    x[i].style.display = "none";   
   }  
   slideIndex++;  
   if (slideIndex > x.length) {slideIndex = 1}   
   x[slideIndex-1].style.display = "block";   
   setTimeout(carousel, 2000);   
 }  
 </script>  
      </body>  
 </html>  

Description of above HTML code:
link rel="stylesheet" href="style.css" is the link of your css file, type this link code in the head tag.

then create a div tag within body tag and give a name, here slideshow is the name of of the div. Then take your all images with img tag and give a class name, here slide is the class name of all img tag and 01, 02, 03 are the name of the images. You have to change these name with your images name.

Description of Javascript code :

In the body tag script to script is the code of javascript for this slideshow. In this script slide is the class name of images, you need to change the slide with your class name. And 2000 is the image changing speed of this slideshow. You can change this number with your required number.

Step 2: Type/paste the below code in your style.css file

#slideshow{
      width:1100px;
      height:250px;
      margin:0 auto;
 }
 .slide{
      width:1100px;
      height:250px;
 }

Description of CSS code :

In #slideshow and .slide 1100px width and 250px is the height of total div and images also.

To take this slideshow div in the center you can use margin 0 auto code.

0 comments:

Post a Comment

Designed by: Ruhul | Facebook | Twitter | Instagram
Copyright © 2018. Alamin Computer - All Rights Reserved