Creating Simple Image Slider Jquery Plugin

Today we will see how to create a simple image slider plugin using jquery. The demo can be seen here

demo: http://designmantra.x10.mx/labs/imageslider/

In here i will be explaining the logic used to build this.


Step 1: Assign css styling to the images which will be part of the slideshow. we will be positioning them absolutely positioning them and adding setting there display property to none.

Step 2: Then set the image display property to block for image you want show.

Step 3: We set a timer of 7 seconds after which jquery will check whether the active image is the last image or not.
If not the last image it will change the display property of next image to block and set display property to none for current image.
If its last image the it will change the display property of the 1st image.

We have also given 2 user controls by which user can move back and forth within these images. One control is pair of arrows that helps you move forward and backward in images.

The next set of controls are image controls which equal to the number of images. On clicking on these you can directly jump to any image.
When user clicks the index value of that element is determined and then the respective image is activated.
Feel free to download the code and experiment

Download code : http://designmantra.x10.mx/labs/imageslider/imageslider.zip