Top 10 Javascript slideshows, carousels and sliders

by Jean. 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.

  • Pingback: [Vote 4 Me] Blog Vibrations

  • Pingback: yearblook.com

  • Pingback: PostOnFire.com

  • Pingback: Web 2.0 Announcer

  • http://sirjorge.com/blogx sir jorge

    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.

  • Pingback: 10 expositores de diapositivas desarrollados en Javascript | aNieto2K

  • http://mothertheme.com Tim Norton

    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.

  • Pingback: Top 10 Javascript slideshows, carousels and sliders « Narendra Dhami

  • Pingback: CalinSoft

  • Dennis Schulte

    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.

  • http://www.lyxia.org jbj

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

  • Pingback: Weekly Link Share on HomeBiz Resource | Make Money Online Blog

  • http://aloestudios.com Andy Ford

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

  • http://www.hamroawaaz.com/ United Voices

    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.

  • Pingback: Le migliori gallerie di immagini, slider e carousel in javascript « Fedeweb

  • http://hayespotter.co.nr hayes

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

  • http://www.electricprism.com/aeron rloaderro

    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

  • http://www.lyxia.org jbj

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

  • http://www.fullcolorpanda.com redhat

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

  • http://www.lyxia.org jbj

    @redhat: Thanks! mooSlider is great :)

  • Pingback: 5 tutorials to web design, the apple.com way

  • Pingback: Say it with links: Jimmy Hendrix, Ultimate Google, Rubik's Cube and a lot of AJAX at TRENDWATCH DAILY

  • Pingback: Best Design Resources of August 2008 | CrazyLeaf Design Blog

  • http://www.livingdowntowndesmoines.com Larry Bradshaw

    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.

  • http://www.lyxia.org jbj

    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.

  • Pingback: Lo mejores recursos de diseño en Agosto ‘08 | frogx.three

  • DH

    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

  • http://www.ruya-yorumlari.info Rüya Yorumları

    Hi.

    Very Nice Collection.Thanks Man..

  • Pingback: 10 Autumn Website Reboot Essentials | Urban Mainframe

  • http://www.serie3.info/ Boban Karisik

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

  • http://jsqx.net/ed-hardy/ Ed Hardy

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

  • http://blog.lokamaya.net Lokamaya

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

    @zaenal

    • http://bomladrao.blogspot.com José

      This link is dead!!! does anyone know where to get it?

  • http://www.webdesignertom.co.uk/ Tom

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

  • http://www.wpreality.com wpReality (wordpress for real estate)

    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!

  • http://www.electricprism.com/aeron rloaderro

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

  • http://www.safedietplans.com safe diets

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

  • http://seocareer.webs.com/ Seo Career

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

  • http://www.3arn.net/3-ways-to-help-you-preload-images/ Preload Images

    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!

  • http://www.biznesor.pl biznes

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

  • http://www.fofo-vb.com/vb/t23319.html توبيكات ملونه

    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!

  • http://iwantthathotel.com.au Cheap Hotels Guy

    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…

  • http://www.songfort.com abeer

    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.

  • http://www.tempocreative.com Tempo Web Design

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

  • http://www.quizzpot.com Hazel Q.

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

  • http://uacode.com dobs

    Add http://www.electricprism.com/aeron/slideshow/

  • http://www.technogadge.com TechnoGadge

    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.

  • Pingback: Content carousels reviewed: Yahoo loses, Sky wins » malcolm coles

  • http://www.serenedestiny.com Website Design Services

    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.

  • Pingback: Dicas – 10 listas de 10 coisas « Templário da Tecnologia

  • Pingback: Thunder-Boy » Blog Archive » 10 listas de 10 coisas…

  • Me

    Thank you, it’s very good

  • Pingback: Anonymous

  • http://www.edhardybarzar.co.uk ed hardy

    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.

  • Kevin

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

  • PeterL

    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!

  • http://www.hasfa.myportal.my hasfa

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

  • Pingback: Cativando Visitantes com SlideShow’s

  • Pingback: 10 adet harika javascript slide show htt… « wiki.laroouse

  • http://www.motorrad-autogrammkarten.de Björn Reichert

    great list, i try some on my page :)

  • http://www.novicebloggers.com/ Senthil Ramesh

    Excellent dude. These things rock!!!

  • http://twitter.com/maxymeumprod MAXymeum Prod.

    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 !

  • Pingback: 6 Caruseles y efectos de transición en Javascript | Omeyas Web

  • Allen

    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?

  • Allen

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

  • Michel

    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.

  • Pingback: More website coolness. - SkriptFounders

  • http://nerdscube.com/ Anooj

    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.

  • http://www.peonybox.com David McLaughlin

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

  • http://healthybaba.com Mike

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

  • Pingback: uberVU - social comments

  • http://www.lbooks.ru Sect0R

    Where I can find carousel with paging ?

  • http://www.santas-christmas-letters.com kevin dockerty

    The Space Gallery is awsome.Great sliders.
    Thanks for these folks.

  • http://www.codfanatic.com George

    Looking for a list of these for ages tonight, then found your site. Thanks for this post!

  • http://www.hallmarcwebsites.com/ Marc Hall

    Glider is broken in Chrome and the last in your list goes to a portal site.

  • http://www.kerryonworld.com Kerry

    Thanks for these Jean.

    SpaceGallery is interesting and NoobGallery is done quite well. FWIW, the link to accessible news slider is dead.

  • http://www.ilkem.com.tr ilkem

    The Space Gallery is awsome.Great sliders.

  • http://www.clubnetsearchmarketing.co.uk Geoff Jackson

    Does anyone know what the carousel plugin used on this page is?

    http://james-caan.com/james2010/press.php

    Thanks in advance.

  • Pierre-Louis Lefevre

    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

      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.

  • Alex Marin

    Found a great one, with an admin interface to boot.

    http://www.jstyler.net/

  • Darlene

    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?