Create a Image Slider using jQuery

In this tutorial, I will be telling you how to design a Image Slider using Javascript (jQuery). The process is very simple but there are a lot of factors you need to look into if you want to get the perfect result. I created a lot of mistakes while doing such a slider, so i will notify all that whenever needed.

To start off, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. It is quite astonishing to see the enhancements made possible through jQuery.

First of all, you need to download some scripts which acts as a reference library for the jQuery codes within the slider.

The list to be downloaded is given below. All you need to do is download the scripts which is in the javascript format(*.js) and put them in one folder.

• Image Slider 1.1 (right click and save link as)
  
• jQuery 1.3.2
• jQuery Easing Plugin 1.3

Once you have downloaded all of the above files and put them in one single folder, create a new notepad (text) file in the same folder and rename it as slider.html (anything will do but, do this just for the sake of it (^_^) )

Create a New folder named Picts and put all the pictures you want to slide inside the folder. Make sure it is not big in size else the smoothness of the sliding wont be good.

Open the text file in notepad and then create a new HTML code by adding the html, head, body tags. If you don't know that, just download the html file from RapidShare and put it in the folder with the plugins (I couldn't get the code pasted here because blogger is paranoid sometimes :


Make sure the following are in the same folder:

• the jQuery plugins(3 of them, all in the ".js" format).
• the picts folder which contains the pictures.
• finally, the text file which contains the main html code for the slider(slider.html).

MISSION ACCOMPLISHED...Tadaa........

Now, just open the text file (slider.html) in any browser and ...VOILA....click on the images and the see the images flow.

• You can also change the Slider image size by changing the values in the "div id" block.

Things you should remember if you try any javascript or jQuery codes in the future:

• The script should get loaded before the body tag and also the CSS code. This is very important because the necessary libraries must be accessed before the code can be authorized. So, you need to add the scripts and the css code before the tag.
  
• Always comment before adding any sublinks or strange codes which you might forget where you added once you scroll back.
• Its advisable to use Adobe Dreamweaver to modify the position if the image slider, even though it makes dealing with things easier.
  

Want to see the image slider in action? Take a look: Image Slider
>Try this code and notify me with all the suggestions or errors that you face by posting comments.
>If you are successful in designing the slider, You better take a look at this. Download the slider from the link given below and check out the different slider that have been showcased. It is simply awesome.

Easy Slider

>Thanks: Credit goes to the jQuery team for their wonderful plugin.