12 Best jQuery Slider Tutorials

by Editor

jQuery sliders are most commonly used on portfolio sites or displaying featured articles on a site. Even if you have no knowledge about jQuery or javascripts its easy to add jquery to any blogger, wordpress or joomla site. This article features the 12 best demos and tutorials on how to add jQuery sliders.

Image Rotator with Description

Tutorial: http://designm.ag/tutorials/image-rotator-css-jquery/

jQuery Image Gallery/News Slider with Caption

Demo: http://www.queness.com/resources/html/newsslider/index.html
Tutorial: http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial

Full Screen Image Gallery Using jQuery and Flickr

Demo: http://galleria.aino.se/
Tutorial: http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/

Slick and Accessible Slideshow Using jQuery

Demo: http://sixrevisions.com/demo/slideshow/final.html
Tutorial: http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

Fancy Thumbnail Hover Effect with jQuery


jQuery Image Slideshow with Semi Transparent Caption

Demo: http://www.queness.com/resources/html/slideshow/jquery-slideshow.html
Tutorial: http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

Slider Gallery 

Tutorial: http://jqueryfordesigners.com/slider-gallery/

Building a jQuery Image Scroller

Demo: http://d2o0t5hpnwv4c1.cloudfront.net/300_jquery/image%20Scroller/imageScroller.html
Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/

Sliding Boxes and Captions with jQuery

Demo: https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm
Tutorial: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Create Beautiful jQuery Slider

Tutorial: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

How to: Create a Fancy Image Gallery with jQuery

Tutorial: http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery

Coda Slider Effect

Demo: http://jqueryfordesigners.com/demo/coda-slider.html
Tutorial: http://jqueryfordesigners.com/coda-slider-effect/

Article by »

Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.

Author Connect »

1 Evan

Full Screen Image Gallery rocks! really! Thanks for sharing. I like jQuery sites. They look smooth and beautiful and professional at the same time!

2 Frank Cern

Evan, I’ve got to agree with you. jQuery sliders are really professional looking. I must say that I’m partial to the semi transparent slider example shown here. Really neat.

3 Yogesh Mandge

Awesome jQuery Sliders, Thanks For Providing Tutorial Link too!
Btw I Liked The Fancy One 🙂

4 myles

ohh jquery is really a good language to learn. Atleast one can edit those custom codes. 😉

5 Martin

I’ve been using Aviaslider on one of my sites, but there are some free alternatives here that are just as good. Thanks

6 himanshu

I like Slick slideshow the most it seems good and beautiful to see.

Comments on this entry are closed.

Previous post:

Next post: