Top 10 Javascript slideshows, carousels and sliders

Posted by jbj on Aug 7, 2008 in Web design, Web development • 32 comments

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.

32 reactions

» Comments RSS Feed

1 - sir jorge on Aug 7, 2008, 9:16 pm:

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.
2 - Tim Norton on Aug 8, 2008, 2:57 am:

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.
3 - Dennis Schulte on Aug 9, 2008, 4:09 pm:

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.
4 - jbj on Aug 9, 2008, 4:28 pm:

Thanks for your contributions, Dennis, I like both of theses slideshows.
5 - Tom Riddle on Aug 19, 2008, 12:33 pm:

I’m using JCarousel on my theme now. See demo: http://www.wp-maganews.com/
6 - Andy Ford on Aug 25, 2008, 12:08 am:

The “Cycle” plugin for jQuery is downright amazing for slideshows - http://www.malsup.com/jquery/cycle/
7 - United Voices on Aug 25, 2008, 6:08 am:

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 - hayes on Aug 29, 2008, 1:50 am:

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 =).
9 - rloaderro on Aug 30, 2008, 4:21 pm:

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
10 - jbj on Aug 30, 2008, 4:30 pm:

Thanks for letting me know about Slideshow2! It’s indeed a great script
11 - redhat on Aug 31, 2008, 1:46 pm:

Thanks for the list,
May I add another one?
http://www.artviper.net/mooHorizonSlider/mooSlider.php
12 - jbj on Aug 31, 2008, 5:05 pm:

@redhat: Thanks! mooSlider is great
13 - Larry Bradshaw on Sep 8, 2008, 5:02 pm:

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.
14 - jbj on Sep 8, 2008, 6:01 pm:

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.
15 - DH on Sep 24, 2008, 12:36 am:

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
16 - Rüya Yorumları on Oct 2, 2008, 3:31 pm:

Hi.

Very Nice Collection.Thanks Man..
17 - Boban Karisik on Oct 16, 2008, 8:46 pm:

I just made this plugin for jQuery, check it out: http://www.serie3.info/s3slider/
18 - Ed Hardy on Oct 29, 2008, 6:35 pm:

That’s definitely a great and comprehensive list! I just added it to delicious. Thank you so far!