Site Loader
Get a Quote

Slide images using JavaScript


Slide images using JavaScript:-Welcome Readers, In this blog I will demonstrate you that how can we make a simple slider using JavaScript code.

I must tell you it is very interesting and easy job. Just you have to follow all these steps one by one. First of all, we have to add an image tag of an HTML element so that we can iterate all images in folder one by one

<html>
<head>
<title>  Slide images using javascript ?</title>

</head>
<body>
  <img height="400" name="slide" src="images/slider/big1.jpg" width="100%" />
<!-- Create a folder with images and then create sub folder with
 name slider and copy all images in that folder -->
</body>

</html>

Then Add JavaScript code to HTML file.


<html>
<head>
<title>  Slide images using JavaScript ?</title>

</head>
<body>
  <img height="400" name="slide" src="images/slider/big1.jpg" width="100%" />
<!-- Create a folder with images and then create sub folder with
 name slider and copy all images in that folder -->
</body>
<script language="JavaScript" type="text/javascript">
        var i = 0;
        var path = new Array();

        // All LIST OF IMAGES in folder
      //  path[0] = "images/slider/big1.jpg";
       // path[1] = "images/slider/big2.jpg";
       // path[2] = "images/slider/big3.jpg";

        function swapImage() {
            document.slide.src = path[i];
            if (i < path.length - 1) i++; else i = 0;
            setTimeout("swapImage()", 7000);
        }
        window.onload = swapImage;
</script>
</html>

I have copied the code after body you should do same because it as a good practice to keep all JavaScript code after body end.

After doing this code.When you will execute this code a slider of your images will start sliding.You can increase and decrease the speed of slider by changing the value in this code.

setTimeout("swapImage()", 7000); //7000 means 7second you can increase and decrease speed

Feedback

I hope you enjoyed this post about  “Slide images using JavaScript in HTML” and provide your valuable feedback and share your problem in Technical Forum.

Post Author: TechieFlair

Leave a Reply

Your email address will not be published.