jQuery Image Slider Example

Last updated on Aug 02, 2016

Milan Sanathara

jQuery / JS


jQuery Image Slider Example

In our previous jQuery tutorials we have taught about jQuery animations and effects. In this blog we are focusing on how to create custom jQuery image slider and show some jQuery image slider example.

In previous jQuery blogs we shaded light on various jQuery effects.

Now, with the help of these jQuery animation effects, we will create jQuery image slider,and prepare a jQuery image slider example.

While,you are using ready made highly animated jQuery image slider in your site, it needs to load some css and js files, some times it will created more load in your site.

They might have some complicated or complex code, so sometimes to customize their code become annoying.

If your sites really needs highly animated jQuery image slider then it is fair to use them ,but if your needs is limited and basic ,then custom jQuery image slider is a good option for you,since it has simple code and less dependency with compare to others.

jQuery Image Slider Example will teach you that how to make your custom jQuery slider.

In jQuery image slider tutorial, we will use following jQuery animation effects:

  • jQuery fading
  • jQuery sliding
  • and other jQuery animation effects.

jQuery basic slider :

To create most basic jQuery slider ,first of all load following jQuery to your page.

Then load some images.

Consider following code,Every image has a common class named at_slider.  Which we will use in jQuery code,and every single image div has an unique id such as img-1,img-2..

we are making an image slider so by default all images needs to be hidden except the first one.we will display turn by turn every image by trigger events using jQuery.

Add buttons for every single image.

Every button has an attribute img_id which targets a certain image id.

jQuery Code for rotate images:

All the buttons have a common class named .at-btn , we have set a click event on this class.

After the event trigger on button click event, jQuery will remove active class from all the buttons.And add active class on the button which is clicked currently.

Then,we will get the current image from hidden element.

Now, we will get the upcoming image id which a clicked button has.

Slide toggle() toggling between two alter net given effect such as  slide-direction-1 and slide-direction-2 where direction-1 and 2 is (up/down,left/right).

Usually,Slide effect working up/down,by default, but we can set direction as shown in following code.

We can also manage speed of sliding as shown in following code.

See and Download The Live Demo of jQuery basic slider

Basic Fading Effect : 

See and Download live demo of jQuery fading slider

Slide and bounce : 

easeOutBounce effect enables the slide to bounce.

See and Download the live demo of jQuery bounce slider

jQuery slider shake effect :

See and Download the live demo of jQuery slider shake effect

jQuery up/down slider : 

Default slide effect.

See and Download live demo of jQuery up/down slider

jQuery auto slide : 

In Previous effect,here we are  using the number of buttons to change the image,as if we use the buttons for every image,we need to allocate a single  button for a single,it is bad user experience while we have more number of images.

To overcome that  we are using only two buttons ,the first one for previous and the another one for next.

Add a hidden element to your code ,which shows the total number of images.

The jQuery code.

Basically, On click event the function checks the clicked-button is for previous or next.

If the clicked button is for previous then it will perform [current image – 1],and if the button is for next then [current image + 1].

The count of current image will be taken by spliting current image id which is gotten from hidden element,as shown in above code.

It it is done for replacing two buttons with two or more buttons.check it.

Now, we will write some code  on the above code and prepare auto sliding images.

To do this we need to auto click the next button and if the current image is last one then auto click on the previous button.

It is far simpler, Write a code which auto click on next button on a specific time interval.

After every 2 seconds ,our function will be called.

See and Download the live demo of jQuery auto slider

Kindly,visit our blog regularly for more tutorials of jQuery and jQuery Image Slider Example.
I hope you will find this post very useful regarding jQuery Image Slider Example. Let me know any questions if you have in comment regarding jQuery image slider. I will reply you ASAP.

Have you got cool idea about Web Development ? Contact us Now to get free consultation on your idea.  Alphanso Tech is rated as one of the best Web Development Services Company in India.


Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *