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 »

Comments on this entry are closed.

Previous post:

Next post: