Top 10 Javascript slideshows, carousels and sliders
When you’re looking for a very eye-candy way to display your content, slideshows are always a good choice. Here’s our selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Interface, and Script.aculo.us.
SpaceGallery
SpaceGallery is a new JQuery plugin that provide an impressive Time Machine like effect to your images. Very good.
Noobslide
Definitely one of my favorite slideshow. Based on Mootools, Noobslide allows numerous variations and customization, despite of its lack of offical documentation.
Anyways, we recently published Noobslide tutorials, this one for the first sample and another one for sample 7.
Accessible News Slider
Accessible news slider is cool Javascript slider, based on JQuery. I used it many times at work, and both myself and clients enjoyed it.
Sadly, it could be a bit hard to personalize it. If you’re interested in a tutorial, just ask in the comments!
SmoothGallery
In my opinion, SmoothGallery is one of the best Javascript slideshows available. In addition of the “classic” sliding effect, Smoothgallery also provide a very smooth fading between items. We’re using on our homepage here at CatsWhoCode. If you’re interested about integrating SmoothGallery to your blog homepage, you should definitely read this tutorial.
jQuery Multimedia Portfolio
Based on JQuery, jQuery Multimedia Portfolio can handle a large variety of media : text, photos, but also flv videos and mp3 audio and is simple to use. A good script.
JCarousel
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). JCarousel is very complete, allowing you to creates vertical slideshows, text-scrollers, circular carousels, custom animations, and can be used together with Thickbox.
I never used it personally on a project, but I can’t wait to try it out!
Glider
Inspired by the carousel you can see on panic.com, here’s Glider, a Prototype/Script.aculo.us based slideshow. A really cool use of Glider has been done on the amazing WP Magazine Theme for Wordpress.
Carousel
Using YUI (Yahoo User Interface), this basic carousel is semantically coded (HTML LI elements within a UL), and allows you to display your content horizontally or vertically.
A simple but good carousel, if you just need the basic effects.
Carousel slideshow
Carousel Slideshow is a Javascript showcasing script which do not require any library as such as Mootools or JQuery. It displays images in a 3D, carousel fashion. Not a bad script, but a bit too long to load on a slow connection.
Carousel.us
Nice Javascript 3D carousel, using either the prototype.js and scriptaculous.js or mootools.js frameworks. It also uses PHP Easy Reflections v3.
68 Comments + Trackbacks
8.7.2008
these aren’t half bad, and for a lot of individuals, I think it would work. I wish there were more “e-commerce” solutions based on these ideas.
8.8.2008
They can be used in e-commerce, I am using the smoothgallery one on my site … but I guess it depends on what exactly you mean.
8.9.2008
Nice collection. A couple others that can be handy are http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/ and http://benjaminsterling.com/jquery-jqgalview-photo-gallery/
He’s using jQuery and I think they’re both really nice for a more casual friendly feel.
8.9.2008
Thanks for your contributions, Dennis, I like both of theses slideshows.
8.19.2008
I’m using JCarousel on my theme now. See demo: http://www.wp-maganews.com/
8.25.2008
The “Cycle” plugin for jQuery is downright amazing for slideshows – http://www.malsup.com/jquery/cycle/
8.25.2008
Thanks for this amazing compilation of Javascript slideshows and carousels. really great. i’ve seen some of them already but the list is just great. thanks for sharing this.
8.29.2008
Awesomelyness, I have heard of some of these before but the others sound very interesting. I will defiantly reference this post if I ever need a slideshow =).
8.30.2008
Nice list – but I think you are missing Slideshow 2! Intelligent thumbnails, KenBurns effect, full-featured controller, accessible, animate every aspect of the show using only CSS, so degradable it even works with JS turned off:
http://www.electricprism.com/aeron/slideshow
http://code.google.com/p/slideshow
8.30.2008
Thanks for letting me know about Slideshow2! It’s indeed a great script
8.31.2008
Thanks for the list,
May I add another one?
http://www.artviper.net/mooHorizonSlider/mooSlider.php
8.31.2008
@redhat: Thanks! mooSlider is great
9.8.2008
Great tools! I was wondering if anyone knew what tool was being used at huffingtonpost.com on the right side bar Most Popular Posts widget. When you click on a story, a shadowbox opens and allows a quick read of the story. I think this is cool, but have no idea what plugin is used to create it.
9.8.2008
That’s a very nice widget, Larry, thanks for telling us! I don’t think that it’s hard to create your own based on lightwindow or another similar script.
9.24.2008
Hello,
which if these slideshows can be used in an Ebay listing ? I believe that this means no access to the header, and restricted Javascript code, however Flash code is allowable.
“I found out exactly what you can an[d] cannot do in a ebay listing:
* HTML or JavaScript used to drop or read a cookie on any eBay page
* HTML or JavaScript that redirects the user from eBay to another page (such as the “replace” script)
* HTML or JavaScript that automatically call remote scripts and pages (such as JavaScript includes or iframes)
* HTML or JavaScript that changes registry entries, or otherwise write to another’s computer hard drive
* HTML or JavaScript that creates automatic “pop-ups” (exception – links that open in a new window when clicked on)
* HTML or JavaScript that automatically posts to scripts in eBay
* HTML or JavaScript that automatically loads any binary program on another’s computer (exception – Flash content)
* HTML or JavaScript that automatically overwrites any area on the listing outside of the item description area”
Thank you,
DH
10.2.2008
Hi.
Very Nice Collection.Thanks Man..
10.16.2008
I just made this plugin for jQuery, check it out: http://www.serie3.info/s3slider/
10.29.2008
That’s definitely a great and comprehensive list! I just added it to delicious. Thank you so far!
11.29.2008
This is an amazing one from pixsite.com: http://www.piksite.com/carousel.us/carousel.us.php
@zaenal
12.6.2008
SpaceGallery if very sexy. There seem to be so many now days. I think this is a nice list.
1.6.2009
I prefer using jquery for website development since it is faster and lighter then mootools and now that there is a great image slideshow with overlay text (http://www.serie3.info/s3slider/index.php) it really rocks. Thanks Boban!
1.6.2009
@wpReality
I am a fan of jQuery too, but it is a bit subjective to say it is simply “faster and lighter” than Mootools. Mootools animation engine is brilliant, and definitely smoother than jQuery in all the demos I’ve seen. In Mootools you can “morph” from one CSS class to another so you have perfect separation of behavior and presentation. If you want to talk selector engines, check the results for yourself: http://mootools.net/mootools_vs_sizzle As far as lighter, Mootools is modular (http://mootools.net/core) jQuery is not so little competition there. Again, both are great frameworks and I use both of them for development, so I respect the strenghts and weaknesses of each. Cheers.
1.14.2009
I think Space Gallery is the coolest of them all. Thanks for the great article. I have you bookmarked!
2.10.2009
Thats exactly a notable further super list! I applicable innumerable substantial to delicious. Thank you thence far!
2.14.2009
I’ve been looking for the one titled SmoothGallery for a while and found it here, there rest are pretty awesome as well especially the very first one!
2.18.2009
This scripts are great. Ajax and jQuery are powerful tools.
2.28.2009
I prefer using jquery for website development since it is faster and lighter then mootools and now that there is a great image slideshow with overlay text (http://www.serie3.info/s3slider/index.php) it really rocks. Thanks Boban!
2.28.2009
I used jCarosel for my site iwantthathotel.com.au – at the time I thought it was pretty good, and it works well – but now I’ve seen SmoothGallery I’m thinking of changing…
3.1.2009
this is a great website and really good works and its really helpful for us…
is there any tutorial for setup accesible news slider or any tutorial for this item??
i will be glasd if any one provide me this tutorial.
3.11.2009
Good post. I’m a big fan of the jCarousel personally.
3.17.2009
Thanks for the list! I liked the carousel in JavaScript 3D
4.23.2009
Add http://www.electricprism.com/aeron/slideshow/
4.30.2009
Very useful list, specially for those who love to play with codes. Personally I love Smooth Gallery. The SpaceGallery is just awesome. Bookmarked it for future reference. Thanks.
6.19.2009
This is a very useful post to a designer like me! We always need new and unique ways to display our portfolio. I will have to reference back to this post in the future.
7.28.2009
Thank you, it’s very good
8.4.2009
which if these slideshows can be used in an Ebay listing ? I believe that this means no access to the header, and restricted Javascript code, however Flash code is allowable.
8.7.2009
Hello,
I am looking for a slideshow mask where a graphic can cover the upper left hand corner of a slideshow. Any help in locating this is appreciated.
Thanks …..
8.20.2009
Which of these will work in an eBay listing?
bearing in mind that eBay listings cannot have the following:
* HTML or JavaScript used to drop or read a cookie on any eBay page
* HTML or JavaScript that redirects the user from eBay to another page (such as the “replace” script)
* HTML or JavaScript that automatically call remote scripts and pages (such as JavaScript includes or iframes)
* HTML or JavaScript that changes registry entries, or otherwise write to another’s computer hard drive
* HTML or JavaScript that creates automatic “pop-ups” (exception – links that open in a new window when clicked on)
* HTML or JavaScript that automatically posts to scripts in eBay
* HTML or JavaScript that automatically loads any binary program on another’s computer (exception – Flash content)
* HTML or JavaScript that automatically overwrites any area on the listing outside of the item description area”
Can any give suggestions as to how to get around these steps, would I have to have all the javascript inline? Please help!
8.22.2009
Thanks a lot guys. Very cool and nice scripts. I must try on myportal.
10.24.2009
great list, i try some on my page
12.3.2009
Excellent dude. These things rock!!!
12.3.2009
Hi ! I think you forgot about my YMslider :
It is a simple dynamic, light-weight (2,1K) and non-intrusive content slider jQuery plugin, fully CSS customisable (theme support) with respect of accessibility and W3C standard rules (strict xHTML valid).
See project Google Code page : http://code.google.com/p/ymslider/
See YMslider in action : http://seb.maxymeum.free.fr/jQuery.YMslider/v105/
Thanks !
12.9.2009
Hi,
I wonder if someone could give a little assistance to a non-coder: I’m trying to implement the JCarousel on my site. I’ve got everything working okay, but one think I want to do is hyperlink off each image in the carousel. I am assuming I need to edit the following:
var mycarousel_itemList = [
{url: 'ASLimages/StVincentsSmall.jpg', title: 'Sound System for St. Vincents Church'},
];
***AND***
function mycarousel_getItemHTML(item)
{
return ”;
};
So in the first piece of code we have references to ‘url’ (i.e. the image location) and ‘title’ (which is the alt text), I’m guessing I need a reference that can refer to a hyperlink.
Can anyone help?
12.9.2009
I worked it out. The term is ‘href’ *****embarrassed*****
12.22.2009
The applications are REALLY nice, especially spacegallery, very sad that google search does not show these slides in search results
.
An gallery script that i allways use is this one: promagallery.com , it supports multiple albums what i really like.
2.3.2010
Why are we missing with some good simple carousel in Prototype like the Jcarousel one and legacy Javascript. Said that, the list given is awesome , love it try out.