Home » 2014 » March » 31 » A simple example of Image slider in HTML and Javascript

4:20 PM
A simple example of Image slider in HTML and Javascript

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

 
 

Category: Technical Solution | Views: 1093 | Added by: shanky | Tags: javascript, how to create an image slider in HT, HTML, image rotator in HTML, picture slder in HTML and Javascrip, simple imgae slider in html | Rating: 0.0/0

Related blogs


You may also like to see:


[2015-01-26][Technical Solution]
How to change IP address of windows system
[2014-02-02][Technical Solution]
Free Web space on internet to upload any kind of file!!!
[2014-07-13][Technical Solution]
Create an online megastore in your website by adding a shopping cart(eSHOP)
[2014-12-28][Technical Solution]
JDBC connection to MS Access database or Oracle database using Java Program.
[2015-01-05][Technical Solution]
How to create ODBC data source and drivers to connect to Oracle or sql server database

Total comments: 0
avatar