25 jQuery Image Gallery/Slider Tutorials and Plugins
Published in Web DevelopmentjQuery 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)
jQuery Image Gallery/News Slider with Caption
Full Screen Image Gallery Using jQuery and Flickr
Create a Slick and Accessible Slideshow Using jQuery
Fancy Thumbnail Hover Effect with jQuery
Simple jQuery Image Slideshow with Semi Transparent Caption
Building a jQuery Image Scroller
Sliding Boxes and Captions with jQuery
Create Beautiful jQuery Slider
How to: Create a Fancy Image Gallery with jQuery
jQuery Image Gallery/Slider Plugins:
S3 Slider – jQuery Image Gallery
For more web development content please see:
101 Responses
I also did some kind of gallery, json based for bandwidth saving (without any effects though): http://iamntz.com/experiments/dSlide/
There is also this newer gallery.
http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/
Demo: http://coffeescripter.com/code/ad-gallery/
Great collection, easy slider is my favourite due to it being incredibly easy to integrate.
Fantastic collection of jQuery galleries.
Nice collection. Nice galleries.
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.
Nice collection
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/
Once again thanks for putting all these grate sight together in one place for fellow designers to view them.
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..!
Great collections. Thanks for sharing.
Very useful list!
I want to suggest this jquery gallery too:
http://pupunzi.wordpress.com/2009/02/28/mbgallery/
awesome post, thanks
It ‘s very useful.
thanks a lot.
check out my slider at http://www.krisdejongdesign.nl. Peace
Awsome
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
Brilliant compilation!!! Some galleries are awesome. I also use visual jquery lightbox, http://visuallightbox.com. nice transition effects.
Impression collection of tutorials, my girlfriend is a photographer and I will make a portfolio in jquery
Nice tutorial, thanks to share.
awesome collection….
nice collection… thanks
still useful and fresh…
Very cool. Thanks for this great collection. My favorite is Gallerific
really a gr8 collection ….thankx for sharing !
Thank you, wonderful projects!
I am using in my web site and usefully it.
Thanks again for you!.
Very nice collection of jquery image sliders… thanks..!!!
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
i need image slider which support multiple instance on single page. can u please help me?
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
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.
What a great list of sliders. I was looking everywhere. Thanks!
very good J qeury
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.
a few of them were very useful, t hank you!
Hi,
This is the greate collection and presentation. It is helpful tool for the website professional.
Yhis is really a good work and I am thankful to JQuery……..
Jquery is very usefull and powerfull. Very nice resources!!
I did some cool jQuery Gallery too
See it here:
http://grafagoggel.de/single/177/image-wall-jquery-tutorial/
nice collection, post flash galleries too
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
Thanks buddy…
I was searching for them since long
Regards
Smita
thanks for the nice collection! here you can find some more examples (free download): http://blog.xparo.com/jQuery-Slider.aspx
really great plugins, http://slidedeck.com has a great slider too, and even a wordpress plugin!
wow. awesome…
thank you for your work.
I think the best one is Sliding Boxes and Captions with jQuery;
what about you?
Check out this sick slider!
http://webdesignandsuch.com/tutorials/fancymoves-jquery-product-slider/
Looks great. I’m hoping to try something more adventurous on my website to help us stand out from the crowd.
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.
Thanks…this is a great collection of galleries with very useful tutorials included.
Really useful image sliders! Thanks for sharing!
Very good jquery plugins. Thanks for post
Nice plugins! Just what I needed. Thanks a lot for sharing.
Nice collection. If you want othen galleries visit http://www.1artmedia.com
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
Definitely need to add ppGallery by PP Plugin. Probably one of the better gallery plugins out there.
http://www.ppplugins.com/demo/ppgallery/
Drezzel,
Thanks for the suggestion, it looks good.
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.
Verry nice sliders. Do you know the slider is used in itunes? I can’t find that one for jQuery
Nice plugins! Just what I needed. Thanks a lot for sharing.
This is the best collections of galleries ever.
This is a great collection for me as webdesigner. Definitily going to use these galleries/sliders with my projects!
Thanks for the above!! Had to bookmark this page because im sure i will be back!
Thanks you very much!
Wonderful sliders! They are perfect and jQuery is perfect framework!
Good collection of all type jquery animation
Nice gallery, but I didn’t see my favourite Coin slider, Nivo Slider , Wow slider http://wowslider.com/
very good sliders. thanks.
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!
nice collection for slider , slick, flicker gallery
thanks for sharing……..
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.
Amazing collection and very helpful for web developers.
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
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!
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.
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/
Excellent list. you can check jquery image slider at
http://www.snilesh.com/resources/jquery/jquery-image-slider/
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
I think you forgot vSlider, jquery based wordpress plugin. check it out here
http://vibethemes.com
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.
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/
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.
A nice variety of slider examples there. Thanks for finding and sharing them.
thank you for the wonderful sliders, I like these collections.
very good examples of slider are great I have applied some of my web designs.
Thank you.
Incredible collection
Thanks for Sharing..
will be using for my projects. Thanks.
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!
Trying to modify the ” Gallerific ” in a way that it shows the full size image when clicked.
great stuff, i used the slider on my site josuep.com
These are just so popular now- its crazy- everyone has a slider-
i like nivo
Photo wall with lightbox like at google photos: http://creotiv.github.com/jquery-photowall/
A nice variety of slider examples there. Thanks for finding and sharing them.
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/
tnx….great collection..
Tnx…awesome…nice collection..
Another nice one. It has 17 transition effects which are customizable. It allows thumbnails.
Menucool Javascript Image Slider
Hey fellows,
anybody have a clue how to make such a slider with thumbnail option?
http://rafalmilach.com/in-the-car-with-r/
cheers
All of these posts are great I also found that I thought you might find interesting, its a parallax slider. It combines the traditional slider with parallaxing elements, its very easy to use and cross browser compatible! Check it out at http://easyparallaxslider.godoploid.com/
bravo, bookmark this!
hope i can create a image slider like this site http://eunited.com.my
I wrote a couple of tutorials on how to do these things from scratch – no plugins:
http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator/
http://fearlessflyer.com/2010/08/how-to-create-your-own-jquery-content-slider/
maybe in a future post – you would like to include.
thanks in advance.
Awesome collection, Thanks for finding and sharing them.