Top 10 Javascript slideshows, carousels and sliders

by Jean-Baptiste Jung. 82 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

Accessible news slider
SpaceGallery is a new JQuery plugin that provide an impressive Time Machine like effect to your images. Very good.

Noobslide

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

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

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

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
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

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

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
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

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.

Comments (82) - Leave yours

  1. [Vote 4 Me] Blog Vibrations said:

    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 the selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Inte…

  2. yearblook.com said:

    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 the selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Inte…

  3. PostOnFire.com said:

    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 Inte…

  4. Web 2.0 Announcer said:

    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…

  5. sir jorge said:

    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.

  9. CalinSoft said:

    10 Galerías de imágenes con estilo diapositivas…

    Leo en Anieto2k, una recopilación de 10 galerías de imágenes con estilo diapositivas desarrolladas con los mas famosos frameworks en javascript, con lo que nos da más alternativas a la hora de querer montar una galería de imágenes.
    ……

  10. Dennis Schulte said:

    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.

  14. United Voices said:

    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.

  16. hayes said:

    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 =).

  17. rloaderro said:

    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

  24. Larry Bradshaw said:

    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.

  25. jbj said:

    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.

  27. DH said:

    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

  35. rloaderro said:

    @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.

  42. abeer said:

    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.

  46. TechnoGadge said:

    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.

  53. ed hardy said:

    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.

  54. Kevin said:

    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 …..

  55. PeterL said:

    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!

  61. MAXymeum Prod. said:

    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 !

  63. Allen said:

    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?

  65. Michel said:

    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.

  67. Anooj said:

    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.

  78. Pierre-Louis Lefevre said:

    Hi,

    I have been trying to install these on E-bay but it’s really not easy. After a while of trying I switched to Flash, following Ed’s suggestion. Found this nifty little HTML Carousel over at www.flashxml.net for free, and I set it up in 15 mins. Works perfectly every time… And I like the 3D feel of the Carousel, plus it’s easily updateable through it’s XML.
    Too bad I can’t see it on my Iphone – damn Apple for no Flash Support on their handsets.

    • JohnS said:

      Hi Pierre,
      Thank you for sharing that with us. Besides 3d carousel i fond some other nice components at flashxml.net, for example 3d banner and dock gallery. What impressed me, was how easy you can customize a component, I recommend it, thanks again.

  80. Darlene said:

    I’m trying to find code for a basic slideshow, much like sample 7. I clicked both links within the sample 7 text, but the pages were not found. Can you provide the code by other means?

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!