25 jQuery Image Gallery/Slider Tutorials and Plugins

Published in Web Development

jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site.

jQuery Image Gallery/Slider Tutorials:

Create an Image Rotator with Description (CSS/jQuery)

Create an Image Rotator with Description (CSS/jQuery) Tutorial

jQuery Image Gallery/News Slider with Caption

jQuery Image Gallery/News Slider with Caption Tutorial

Full Screen Image Gallery Using jQuery and Flickr

Full Screen Image Gallery Using jQuery and Flickr Tutorials

Create a Slick and Accessible Slideshow Using jQuery

Create a Slick and Accessible Slideshow Using jQuery Tutorial

Fancy Thumbnail Hover Effect with jQuery

Fancy Thumbnail Hover Effect with jQuery Tutorial

Simple jQuery Image Slideshow with Semi Transparent Caption

Simple jQuery Image Slideshow with Semi Transparent Caption Tutorial

Create a Free Website

Slider Gallery

Slider Gallery Tutorial

Building a jQuery Image Scroller

Building a jQuery Image Scroller Tutorial

Sliding Boxes and Captions with jQuery

Sliding Boxes and Captions with jQuery Tutorial

Create Beautiful jQuery Slider

Create Beautiful jQuery Slider Tutorial

How to: Create a Fancy Image Gallery with jQuery

How to: Create a Fancy Image Gallery with jQuery Tutorial

Coda Slider Effect

Coda Slider Effect Tutorial

jQuery Image Gallery/Slider Plugins:

 

Supersized

Supersized Plugin

Galleria

Galleria Plugin

TN3 Gallery

Gallery View

Gallery View Plugin

jQuery lightBox

jQuery lightBox Plugin

Gallerific

Gallerific Plugin

Easy Slider 1.5

Easy Slider 1.5 Plugin

Pikachoose

Pikachoose Plugin

S3 Slider – jQuery Image Gallery

S3 Slider - jQuery Image Gallery Plugin

Sliding Image Gallery

Sliding Image Gallery Plugin

Flickr Gallery

Flickr Gallery Plugin

Simple Controls Image Gallery

Simple Controls Image Gallery Plugin

Popeye

Popeye Plugin

Smooth Div Scroll

Smooth Div Scroll Plugin

vSlider

vSlider is our own jQuery slider plugin. It is free for subscribers of our weekly newsletter. vSlider includes 10 different transitions and optional captions, plus it’s fully documented to make it easier to customize. Sign up below to get access to vSlider.

 

vSlider

For more web development content please see:

175 Responses

Ionut Staicu August 6th, 2009

I also did some kind of gallery, json based for bandwidth saving (without any effects though): http://iamntz.com/experiments/dSlide/

Sam August 7th, 2009

Great collection, easy slider is my favourite due to it being incredibly easy to integrate.

Bradley Davis August 7th, 2009

Fantastic collection of jQuery galleries.

aledesign.it August 7th, 2009

Nice collection. Nice galleries.

Nardyello August 8th, 2009

FANTASTIC!!!

I’ve been trying to find a simple explanation of how to make a JS Gallery for a long time. Some of the tutorials linked here are just what I needed.

Thank you.

Streky August 9th, 2009

Nice collection

Ecommerce web design August 10th, 2009

Nice collection of galleries, I love jQuery and these galleries are excellent! I’m just building my site now and I would love to add something like this to display certain portfolios in my header.

Thanks

Eric Shafer August 10th, 2009

These are really helpful, jQuery is one of those recently popular languages that developers need to learn to compete these days.

Featured here: http://www.presidiacreative.com/best-of-the-web-31/

This collection really rocks. Thanks for sharing, Bookmarked for the next jQuery slider projects.

Trevor Collins August 12th, 2009

Once again thanks for putting all these grate sight together in one place for fellow designers to view them.

Mushi August 13th, 2009

Hi,
m new in this field..and at the moment m looking for a slider, where images (thumbnails) move in random direcctions with in the slider screen and when there is mouse over thumbnail, the image become prominent……!!!

can someone tell me a usefull link..!

Arun M August 31st, 2009

Great collections. Thanks for sharing.

Brochure Design Melbourne September 4th, 2009

Very useful resources. I didn’t know there’s so many different types of jQuery image gallery/slider. I will definitely refer here to find the right one for next project. Thanks for sharing.

Matteo September 13th, 2009

Very useful list!
I want to suggest this jquery gallery too:
http://pupunzi.wordpress.com/2009/02/28/mbgallery/

samuel jesse September 15th, 2009

awesome post, thanks

ดูหนัง September 28th, 2009

It ‘s very useful.

thanks a lot.

Kris de Jong October 6th, 2009

check out my slider at http://www.krisdejongdesign.nl. Peace

Sanjay October 29th, 2009

Awsome

KntL November 8th, 2009

in my blog, i have posted some jquery image gallery types. one of them is an image gallery made with jQuery Gestures. maybe you want to add it to your collection

http://kntl.org/jquery-jquery-gestures-is-amazing-making-you

GraphicDesignBay November 13th, 2009

Great work guys!!!

This is one of the best Jquery collection I ever seen.

Thanks :)

Victor December 3rd, 2009

Brilliant compilation!!! Some galleries are awesome. I also use visual jquery lightbox, http://visuallightbox.com. nice transition effects.

escort bcn December 10th, 2009

Impression collection of tutorials, my girlfriend is a photographer and I will make a portfolio in jquery

Raincy December 19th, 2009

Nice tutorial, thanks to share.

judef January 1st, 2010

awesome collection….

webjosh January 14th, 2010

nice collection… thanks

nashekrashe January 16th, 2010

still useful and fresh…

pagemagnify January 21st, 2010

i was looking for some web gallery and i found a great resource at this post. thanks admin

selvacomments January 27th, 2010

i love this plugin. nice clean work. thank you

Zoltan January 29th, 2010

Very cool. Thanks for this great collection. My favorite is Gallerific

nikhil February 1st, 2010

really a gr8 collection ….thankx for sharing !

Web Developer March 2nd, 2010

This is definitely what I have been looking for. Jquery is very interesting, thanks for sharing!

atasözleri March 14th, 2010

Thank you, wonderful projects!

I am using in my web site and usefully it.

Thanks again for you!.

Prity March 17th, 2010

Very nice collection of jquery image sliders… thanks..!!!

PSD to WordPress March 23rd, 2010

Awesome list!! Thank you. I think we need to have more posts like this where it touches on one subject and provides many different examples with links to those examples. Well Done.

windows 7 theme March 26th, 2010

Hi,
Nice post. But i want a up down slider with mouse. you can see it in mootool demos.
that is fine and working very nice. But i want it in jquery.
Please help and post a thread about it.
You have a nice blog and your content are also very help full too.
Thanks again.

PHP Guy April 1st, 2010

Great Work !

Indian Forum April 6th, 2010

WOW
this is really handy. great tips.. I never knew jquery can be so useful. you made my day today thanks

tarjetas personales April 8th, 2010

great’s slideshow.

Huy Nguyen April 8th, 2010

Hi,

This collection is very helpful. But I am looking for this slider: http://www.toptut.com/ would anyone suggest me where can I find this example?

Thanks in advance

Adal Design April 8th, 2010

This is a nice list of sliders.
I need one that gives text links (1, 2, 3…) instead of thumbnails… The search continues!

I’ll be sure to come back and check on this blog, thx 4 sharing!

krunal sonar April 15th, 2010

i need image slider which support multiple instance on single page. can u please help me?

pyhtonist April 20th, 2010

Antoher beatiful jquery sliders. good-look;
http://www.ueuh.com/internet/jquery-plugins-display-sliders-content/

Tamara Sill April 21st, 2010

nice list! thanx for the info

another tool that can be considered is one I use called Likno Web Modal Windows Builder that also lets you create slideshows, etc.

You can take a look at:
http://www.likno.com/jquery-modal-windows/index.php

SlideShow option:
http://www.likno.com/jquery-modal-windows/slideshow.php

Sven May 13th, 2010

Gallerific was my favorite, these days it’s defently jquery ajax-zoom gallery at http://www.ajax-zoom.com It can also zoom the photos with high resolution but it depends on PHP.

itmontreal May 14th, 2010

Hello,
Thanks for the examples. I am looking for a facebook like jquery slider effect:

i.e. when a user clicks on the next Group of pictures that are on a page would move towards left and a new group of pictures would be shown.

I couldn’t find such an example . Could you please help ?

Sean May 19th, 2010

What a great list of sliders. I was looking everywhere. Thanks!

nirmik May 27th, 2010

very good J qeury

Nauman Akhtar May 28th, 2010

Are they really free to use ?

Nauman,
Yes, they are all free, but check the license from the developer before using. There may be some that don’t allow commercial use.

Mobius June 8th, 2010

a few of them were very useful, t hank you!

Beantown Design June 10th, 2010

Here’s an edited version of one I made for a clients website, free download too:

http://webdesignandsuch.com/2009/12/jquery-product-slider/

Free web templates June 13th, 2010

Thanks for sharing jQuery resources sites, some are really very cool.

Swot Template July 8th, 2010

Great list! I love jQuery. So beautiful!

Dayanand July 8th, 2010

Hi,

This is the greate collection and presentation. It is helpful tool for the website professional.

Maruti July 26th, 2010

Yhis is really a good work and I am thankful to JQuery……..

Tienda Pesca Mosca July 27th, 2010

Jquery is very usefull and powerfull. Very nice resources!!

Moritz Graf July 30th, 2010

I did some cool jQuery Gallery too :)

See it here:

http://grafagoggel.de/single/177/image-wall-jquery-tutorial/

kumar August 2nd, 2010

nice collection, post flash galleries too

jan August 5th, 2010

I like the popeye gallery!

Have been trying to get two of them working on one page, but there’s only one showing.
Anybody here an idea about how i get two scripts working?

cheers

smita August 6th, 2010

Thanks buddy…

I was searching for them since long :)

Regards
Smita

tuba August 22nd, 2010

very nice collection, will definitely help. Thank you!

Simon September 2nd, 2010

thanks for the nice collection! here you can find some more examples (free download): http://blog.xparo.com/jQuery-Slider.aspx

va Infotech September 7th, 2010

very usefull for me

I am Website Designer in india

lightg September 16th, 2010

Very interesting collection!

Rene September 16th, 2010

really great plugins, http://slidedeck.com has a great slider too, and even a wordpress plugin!

Ahmadreza September 29th, 2010

wow. awesome…
thank you for your work.
I think the best one is Sliding Boxes and Captions with jQuery;
what about you?

mike i September 30th, 2010

Check out this sick slider!

http://webdesignandsuch.com/tutorials/fancymoves-jquery-product-slider/

surf shop October 7th, 2010

i just tried it out, thank you!

Jason B October 12th, 2010

Looks great. I’m hoping to try something more adventurous on my website to help us stand out from the crowd.

Massimo October 14th, 2010

You helped me a lot finding a nice scroll for a site I recently made.
You can see the “Smooth Div Scroll” working here in the homepage:
http://www.logoarena.com

I also like the Coda Slider, which I used in other projects.
Thank you! Max.

BeantownDesign October 14th, 2010

Here’s another I made for a client, showing how you can use the sliding boxes to make callouts for your homepage..tutorial and free download!

http://webdesignandsuch.com/featured/jquery-sliding-boxes-and-captions/

Wow, these are nice! I can’t wait to start playing with them on my own website. Thanks for posting!

LxC BLOG October 22nd, 2010

Hello,

Check out my vertical slider. http://lxcblog.com/2010/10/10/jquery-vertical-slider-with-scrolling-text/

Thank you.

Glenn October 27th, 2010

Thanks…this is a great collection of galleries with very useful tutorials included.

Pablo Almeida October 27th, 2010

Really useful image sliders! Thanks for sharing! ;)

balıkesir web October 29th, 2010

this is a great collection of galleries with very useful tutorials included.

Great ideas! I’m going to choose one of these and update the galleries on my scrapbook website. Thanks!

Sancaktepe October 30th, 2010

Very good jquery plugins. Thanks for post ;)

Tamil Movie November 5th, 2010

Thanks for grate collection of jquery plugin. Keep it up your work. Thanks

Jquery Slider November 6th, 2010

Lots of great plugins. I took a very similar jquery slider and ported it to WordPress as a plugin for featured content. It’s free. You can check it out at:

http://www.jqueryslider.org/

At the very least, it will give you an idea on how to use these jquery image galleries with WordPress.

rezoner November 10th, 2010

If you are looking for an interactive gallery maybe you gonna like mine project.

http://rezoner.net/labs/photoshelf/

bono November 19th, 2010

Nice plugins! Just what I needed. Thanks a lot for sharing.

Valikonen November 21st, 2010

Nice collection. If you want othen galleries visit http://www.1artmedia.com ;)

Belize city November 21st, 2010

This is a fantastic guide to jquery sliders. Managed to put one on my homepage which I think looks nice.

Donhasatrone November 27th, 2010

Will definetly use this in one of my sites

I was wondering for long time is itbetter to start learning jQuery from the beggining or just use third person scripts.

If someone hasn’t much time – it is way better to use examples above.

Great job, best regards
Donhasatrone

Drezzel December 6th, 2010

Definitely need to add ppGallery by PP Plugin. Probably one of the better gallery plugins out there.
http://www.ppplugins.com/demo/ppgallery/

Vandelay Website Design December 7th, 2010

Drezzel,
Thanks for the suggestion, it looks good.

Great collection … Can suggest a super clean and simple slider with the most minimal add-ons … thanks :)

David December 11th, 2010

I found an incredible flash gallery recently, I absolutely love the way the illustration and photography sections show up.

http://www.kellythompson.co.nz/

Could something as fancy as this ever be done with javascript? I’d love to be able to make something like this work for a website thats ipad friendly.

Website laten maken December 17th, 2010

Verry nice sliders. Do you know the slider is used in itunes? I can’t find that one for jQuery

ROSSiDEAS December 20th, 2010

Thank you. Nice information. I will use it immediately.

gundeep December 28th, 2010

Verry nice sliders. Do you know the slider is used in itunes? I can’t find that one for jQuery

ฟังเพลง December 28th, 2010

Nice plugins! Just what I needed. Thanks a lot for sharing. :D

webb December 29th, 2010

This is the best collections of galleries ever.

Spelen January 8th, 2011

This is a great collection for me as webdesigner. Definitily going to use these galleries/sliders with my projects!

j. Query January 8th, 2011

Nice Collection. Here is a jquery image slider plugin called All-In-One. you can check out..
http://faisal11vcv.wordpress.com/2011/01/08/all-in-one-slider-a-jquery-plugin/

Jack January 11th, 2011

Thanks for the above!! Had to bookmark this page because im sure i will be back!

atasözleri January 16th, 2011

Thanks you very much!

Wonderful sliders! They are perfect and jQuery is perfect framework!

Rali madhusudhana chary January 19th, 2011

Good collection of all type jquery animation

Scott January 20th, 2011

Nice gallery, but I didn’t see my favourite Coin slider, Nivo Slider , Wow slider http://wowslider.com/

tasarhane January 22nd, 2011

very good sliders. thanks.

teebee January 26th, 2011

If anyone knows of a jquery and/or wordpress slider similar to the one here http://www.quibids.com/ I would love it if you shared the name and link!

Thanks!

rahil January 27th, 2011

nice collection for slider , slick, flicker gallery

thanks for sharing……..

Naperville Website Design February 4th, 2011

These are great, but I’m looking for a simple slider that rotates through a bunch of sponsor logos. I don’t need any navigation. I’ve seen it other places before, but can’t recall where.

Vandelay Website Design February 6th, 2011

Naperville,
With most of the scripts you can simply remove the navigation (it’s usually in a separate div so it’s easy to remove). Without that navigation it will just scroll through them like you are looking for.

Saleem February 24th, 2011

Amazing collection and very helpful for web developers.

txpman March 3rd, 2011

Many of them are just what i was looking for! U saved my time, thanx!

Paul B March 6th, 2011

I quite often use this jQuery slider plug-in for my websites. I learnt about it on the course I attended with them. It is lightweight and pretty easy to modify.

http://www.webdesign-training.co.uk/jquery-training-slider.html

kovpack March 6th, 2011

as for me – the Galleria and Gallerific are the best. the only thing i’d like to change is to make slider (not pagination) for Gallerific. it would be perfect. however, thanks for galleries!

Kevin Leary March 10th, 2011

I’ve just released a replica of the Hulu.com slider using jQuery/JavaScript instead of flash. It’s built with progressive enhancement in mind and leverages CSS3 to avoid the use of images wherever possible. It’s completely free, including all CSS, HTML, JS and Photoshop CS5 source PSD’s.

I figured you Vandelay cats would be interested.

Mould Maker March 16th, 2011

I like these collections , But is there a plugin only scroll to left or right automacticly?

Michael March 20th, 2011

The jQuery Slider Gallery does not work with any modern version. I found one that is similar that does work.

http://www.ajaxera.com/jquery-updated-slider-gallery/

mindxstudio April 6th, 2011

Thanks for great effort in collection of such good jquery image galleries, it’s help us a lot.

CSS Design April 8th, 2011

Hi, I like these gallery, thanks for share!!!

neel April 9th, 2011

Excellent list. you can check jquery image slider at

http://www.snilesh.com/resources/jquery/jquery-image-slider/

DCS Solution April 14th, 2011

Hi, check out our 3D jQuery Image Gallery: http://www.dcs-solution.com/blog/?p=11#more-11

Will definetly use this in one of my sites

I was wondering for long time is itbetter to start learning jQuery from the beggining or just use third person scripts.

If someone hasn’t much time – it is way better to use examples above.

Great job, best regards

qaiser May 6th, 2011

i was wondering if someone have a post card type gallery, different thumbnails placed randomly and upon clicking any thumbnail you see its larger version like this jquery gallery http://www.templatesrule.com/web-templates/view-template-3228.html, i need something similar but free. Please help

3Dom May 8th, 2011

Great sliders and all, but don’t really like it when a site takes over the personality of a site, so I made my own. Didn’t realise how much time you need to put into these things to make them work. Finally nailed it though as far as I can tell. Here it is if you want to have a look…
http://www.bringmebusiness.com.au/reeltime-jquery-slideshow-plugin.php

Wammo May 25th, 2011

I think you forgot vSlider, jquery based wordpress plugin. check it out here
http://vibethemes.com

sandra June 3rd, 2011

Hi,

Very nice collection. I noticed particularly the image scroller which I would like to use also..but wonder if it is possible that when you click on an image in the scroller to open a pop-up window with the respective image, as in this scroller here: http://www.flashxml.net/image-scroller.html. Thanks for your time. Waiting for an answer.

Tommy June 7th, 2011

Another jQuery slider plug-in called jSwitch. I wrote it about a week ago, so maybe you’ll find it interesting. http://creativator.net/projects/jswitch/

Good example of sliders, thanks for sharing!!

Peter Brown June 16th, 2011

Thanks! I was trying to find the “Fancy Thumbnail Hover Effect with jQuery” plug-in but couldn’t remember the name of it. Nice collection.

Stuart Nisbett June 21st, 2011

A nice variety of slider examples there. Thanks for finding and sharing them.

Ado June 22nd, 2011

thank you for the wonderful sliders, I like these collections.

diseño web mallorca July 1st, 2011

very good examples of slider are great I have applied some of my web designs.

Thank you.

Zohaib Zulfiqar July 8th, 2011

Incredible collection

colocation sheffield July 16th, 2011

Pretty amazing how many different options there are with an image gallery/show! The sohtanaka (first) was exactly what I needed, thanks!

Mohsin Fancy July 16th, 2011

Thanks for Sharing..
will be using for my projects. Thanks.

Gaston July 19th, 2011

Hi, anyone knows any like used by apple in the sites? http://www.apple.com/ipad/
with support for touchscreen, some like this: http://gregmurray.org/ipad/carousel/

Thanks!

Razibul Hassan August 5th, 2011

Trying to modify the ” Gallerific ” in a way that it shows the full size image when clicked.

sweety September 12th, 2011

I need a carousel which contain two rows. If possible can any one post an example of a carousel where next and previous button comes when cursor goes there? this carousel contain multiple images under two rows.

gHants | Diseño gráfico - Web September 27th, 2011

Best and beautiful galleries. Thanks!!

josh November 19th, 2011

great stuff, i used the slider on my site josuep.com

Venus December 13th, 2011

These are just so popular now- its crazy- everyone has a slider-
i like nivo

Andrey December 24th, 2011

Photo wall with lightbox like at google photos: http://creotiv.github.com/jquery-photowall/

nick January 5th, 2012

A nice variety of slider examples there. Thanks for finding and sharing them.

Dimitar Ivanov January 10th, 2012

Awesome collection, thanks. Did you see Zino Image Slider?
Zino is a jQuery slider plugin with full featured API and slideshow capabilities.
http://www.bulgaria-web-developers.com/projects/javascript/slider/

Ganesh February 8th, 2012

tnx….great collection..

Ganesh February 10th, 2012

Tnx…awesome…nice collection..

John March 28th, 2012

Another nice one. It has 17 transition effects which are customizable. It allows thumbnails.
Menucool Javascript Image Slider

Leave a Reply