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.

Related Posts

No related posts.
 

48 Comments

  1. Posted August 7, 2008 at 9:16 pm | Permalink

    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. Posted August 8, 2008 at 2:57 am | Permalink

    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
    Posted August 9, 2008 at 4:09 pm | Permalink

    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. Posted August 9, 2008 at 4:28 pm | Permalink

    Thanks for your contributions, Dennis, I like both of theses slideshows.

  5. Posted August 19, 2008 at 12:33 pm | Permalink

    I’m using JCarousel on my theme now. See demo: http://www.wp-maganews.com/

  6. Posted August 25, 2008 at 12:08 am | Permalink

    The “Cycle” plugin for jQuery is downright amazing for slideshows – http://www.malsup.com/jquery/cycle/

  7. Posted August 25, 2008 at 6:08 am | Permalink

    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. Posted August 29, 2008 at 1:50 am | Permalink

    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. Posted August 30, 2008 at 4:21 pm | Permalink

    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. Posted August 30, 2008 at 4:30 pm | Permalink

    Thanks for letting me know about Slideshow2! It’s indeed a great script :)

  11. Posted August 31, 2008 at 1:46 pm | Permalink

    Thanks for the list,
    May I add another one?
    http://www.artviper.net/mooHorizonSlider/mooSlider.php

  12. Posted August 31, 2008 at 5:05 pm | Permalink

    @redhat: Thanks! mooSlider is great :)

  13. Posted September 8, 2008 at 5:02 pm | Permalink

    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. Posted September 8, 2008 at 6:01 pm | Permalink

    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
    Posted September 24, 2008 at 12:36 am | Permalink

    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. Posted October 2, 2008 at 3:31 pm | Permalink

    Hi.

    Very Nice Collection.Thanks Man..

  17. Posted October 16, 2008 at 8:46 pm | Permalink

    I just made this plugin for jQuery, check it out: http://www.serie3.info/s3slider/

  18. Posted October 29, 2008 at 6:35 pm | Permalink

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

  19. Posted November 29, 2008 at 5:07 pm | Permalink

    This is an amazing one from pixsite.com: http://www.piksite.com/carousel.us/carousel.us.php

    @zaenal

  20. Posted December 6, 2008 at 9:50 pm | Permalink

    SpaceGallery if very sexy. There seem to be so many now days. I think this is a nice list.

  21. Posted January 6, 2009 at 12:47 am | Permalink

    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!

  22. Posted January 6, 2009 at 1:18 pm | Permalink

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

  23. Posted January 14, 2009 at 9:49 am | Permalink

    I think Space Gallery is the coolest of them all. Thanks for the great article. I have you bookmarked!

  24. Posted February 10, 2009 at 11:39 am | Permalink

    Thats exactly a notable further super list! I applicable innumerable substantial to delicious. Thank you thence far!

  25. Posted February 14, 2009 at 11:39 am | Permalink

    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!

  26. Posted February 18, 2009 at 7:57 pm | Permalink

    This scripts are great. Ajax and jQuery are powerful tools.

  27. Posted February 28, 2009 at 3:34 pm | Permalink

    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!

  28. Posted February 28, 2009 at 11:09 pm | Permalink

    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…

  29. Posted March 1, 2009 at 4:48 pm | Permalink

    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.

  30. Posted March 11, 2009 at 10:45 am | Permalink

    Good post. I’m a big fan of the jCarousel personally.

  31. Posted March 17, 2009 at 7:55 pm | Permalink

    Thanks for the list! I liked the carousel in JavaScript 3D

  32. Posted April 23, 2009 at 12:06 am | Permalink
  33. Posted April 30, 2009 at 6:32 pm | Permalink

    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.

  34. Posted June 19, 2009 at 5:29 pm | Permalink

    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.

  35. Me
    Posted July 28, 2009 at 7:17 pm | Permalink

    Thank you, it’s very good

  36. Posted August 4, 2009 at 10:06 am | Permalink

    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.

  37. Kevin
    Posted August 7, 2009 at 6:23 am | Permalink

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

  38. PeterL
    Posted August 20, 2009 at 4:05 am | Permalink

    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!

  39. Posted August 22, 2009 at 11:46 pm | Permalink

    Thanks a lot guys. Very cool and nice scripts. I must try on myportal.

  40. Posted October 24, 2009 at 9:50 am | Permalink

    great list, i try some on my page :)

  41. Posted December 3, 2009 at 9:10 am | Permalink

    Excellent dude. These things rock!!!

  42. Posted December 3, 2009 at 10:17 am | Permalink

    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 !

  43. Allen
    Posted December 9, 2009 at 2:22 pm | Permalink

    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?

  44. Allen
    Posted December 9, 2009 at 3:15 pm | Permalink

    I worked it out. The term is ‘href’ *****embarrassed*****

  45. Michel
    Posted December 22, 2009 at 1:06 pm | Permalink

    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.

  46. Posted February 3, 2010 at 7:55 am | Permalink

    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.

  47. Posted February 15, 2010 at 9:32 pm | Permalink

    Handy article. I especially like SmoothGallery, can see me using this on my site in the near future!

  48. Posted March 5, 2010 at 5:19 pm | Permalink

    Thanks guys!
    One of the best slider lists I’ve ever discovered on the net .

23 Trackbacks

  1. By [Vote 4 Me] Blog Vibrations on August 7, 2008 at 7:21 pm

    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. By yearblook.com on August 7, 2008 at 7:22 pm

    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. By PostOnFire.com on August 7, 2008 at 7:28 pm

    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. By Web 2.0 Announcer on August 7, 2008 at 9:14 pm

    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. [...] 10 galerías dinámicas para usar en nuestras [...]

  6. [...] 2008 Top 10 Javascript slideshows, carousels and sliders Posted by nsdhami under Web   Good Articles [...]

  7. By CalinSoft on August 8, 2008 at 5:33 am

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

  8. [...] Top 10 Javascript slideshows, carousels and sliders – 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Interface, and Script.aculo.us. Eye catching scripts to display your content. [...]

  9. [...] di immagini, slider e carousel in javascript Catswhocode ha stilato una raccolta delle 10 migliori gallerie di immagini (e non solo) in [...]

  10. By 5 tutorials to web design, the apple.com way on September 2, 2008 at 11:50 pm

    [...] start with a nice tutorial from DynamicDrive. Remember that post where I shown you 10 javascript sliders? Here’s another great way to display your content: This menu mimics the look of the vertical [...]

  11. [...] you live the iTunes coverflow, and want to reproduce it on your site. On this site, you will find 10 great javascript sources to download. Those scripts are light and very nicely [...]

  12. [...] Top 10 Javascript slideshows, carousels and sliders Selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Interface, and Script.aculo.us. [...]

  13. [...] Top 10 Javascript slideshows, carousels and sliders [...]

  14. [...] for an exciting way to display your multimedia content, slideshows are always a good choice. Here’s a selection of 10 cross-platform, absolutely stunning slideshows, carousels and sliders, based on Mootools, JQuery, Yahoo! User Interface, [...]

  15. [...] Top 10 javascript slideshows, carousels and sliders for your blog or site at Cats Who Code. [...]

  16. [...] Dez carrosséis, slideshows e controles deslizantes em Javascript [...]

  17. [...] Dez carrosséis, slideshows e controles deslizantes em Javascript [...]

  18. By Anonymous on August 2, 2009 at 9:51 am

    [...] http://www.catswhocode.com/blog/top-…ls-and-sliders __________________ SiteBilgi | GoPof | Sunucu Tara [...]

  19. By Cativando Visitantes com SlideShow’s on August 28, 2009 at 11:52 pm

    [...] conhecer outros scripts visite o blog Cats Who Codes que escreveu o artigo Top 10 Javascript Slideshows, carousels and slideshows que possui mais alguns modelos. Existem vários outros que você poderá encontrar em pesquisas por [...]

  20. [...] adet harika javascript slide show http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders 0 like it. Like  [...]

  21. [...] una serie de galerías y caruseles bastantes curioso, aquí os dejo una recopilación de la Web Cats Who Code. En su web ponen 10 pero los últimos no me gustan mucho como [...]

  22. By More website coolness. - SkriptFounders on January 24, 2010 at 1:55 pm

    [...] A carousel is a system that takes images combined with information and cycles through each node displaying such information as the user interacts with the controls.  you can find a nice set of implementations across jQuery, mootools and prototype here. [...]

  23. By uberVU - social comments on March 13, 2010 at 7:42 pm

    Social comments and analytics for this post…

    This post was mentioned on Twitter by del_javascript: Top 10 Javascript slideshows, carousels and sliders http://ow.ly/16KgTE…

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Smashing Network
WordPress Appliance - Powered by TurnKey Linux