Many times we have to add an image slider or banner on the home page of a website.  This usually contains a set of rotating imgaes containing links to most important contents of your website.

So an image slider gives an attractive look to your website and exhibites a nice presentation of your contents.

Here we will learn to create a basic image slider using HTML and Javascipt. We will just put a set of images and then we will give it animation.

There will be two button that can be used to move the picture slider left and right.

In the Body tag we will put below code that is simply adding a set of images. Also, it will add two picture buttons that can be used to move printers left and right.

<div style="width:520; height:102; overflow-x:hidden; overflow-y:hidden;">
<div id="div1">
<img class="pa" id="pa" src="image1.jpg" height="100px" width="120">
<img class="pa" id="pa" src="image2.jpg" height="100px" width="120">
<img class="pa" id="pa" src="image3.jpg" height="100px" width="120">
<img class="pa" id="pa" src="image4.jpg" height="100px" width="120">
<img  class="pa id="pa" src="image5.jpg" height="100px" width="120">
</div>
</div>  <!--below code will add two small red and green picture button-->

<div id="moveleft" style="background-color:red; width:20px; height:20px;"></div>
<div id="moveright" style="background-color:green; width:20px; height:20px;"></div>

In the head tag, we put following script. The below script is working on click of the small picture buttons having ids moveleft,moveright.

On click of them, we call a function to animate the pictures.

We have decremented the left margin by some value to move it left and incremented it to move it right.

The pictures are having id "div1" which is used to animate.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

     $('#moveleft').click(function() {
         $('#div1').animate({
         'marginLeft' : "-=124px" //moves left
         });
     });

     $('#moveright').click(function() {
           $('#div1').animate({
           'marginLeft' : "+=124px" //moves left
           });
     });

});
</script>

Also, this script is using JQuery, so make sure you place the jquery.js script at the same place/folder where your image and HTML file is.

You can get the source code here