iBlognet

12 Best jQuery Slider Tutorials

by Sahil Umatia

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

Demo:
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

Demo:
Tutorial:

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 

Demo:http://jqueryfordesigners.com/demo/slider-gallery.html
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

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

How to: Create a Fancy Image Gallery with jQuery

Demo:
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 »


Sahil is the Editor of iBlognet. He is a freelance writer on topics related to Website Optimization (SEO), Blogging, and Tech. He also specializes in SEO, HTML, CSS and Photoshop. Sahil has written 294 fantastic article(s) on iBlognet.


Author Site » Know me More

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: