Carousel Examples: YUI Library, jQuery, MooTools & Prototype

Posted on April 11, 2009, under jQuery, MooTools 

Are you looking to setup a carousel on your website? Checkout this list!

yui-carousel

The YUI Carousel Control is an excellent tool if you need to offer your website’s a way to browse images/content arrayed vertically or horizontally in an overloaded page region. Some of the featured provided by this awesome library include:

  • Circular Carousel
  • Partial revealing previous and next items
  • Usage of both images and text within an item
  • AJAX usage for deferred loading of items
  • Paginator
  • Usage with the ARIA plugin

jcarousel

jCarousel is a JQuery Plugin for controlling a list of items in horizontal or vertical order. The items can be scrolled back and forth (with or without animation) and can be static or loaded with AJAX.

Quick feature list:

  • Simple and Vertical Carousel
  • Dynamic content loading using AJAX
  • Circular Carousel
  • JCarousel can be used a Textscroller
  • Flexible Carousel
  • Carousel with Custom Animation Effect

jquery-infinite-carousel

JQuery Infinite CarouseljQuery for Designers decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. The fully explained tutorial will walk you through the fundamentals of the effect and the way it can be recreated.

mootools-carousel

Creating a carousel with MooTools is a step by step fully explained tutorial that will teach you how to create a Carousel using the MooTools Framework. It shows you how to set up the HTML, CSS and the JavaScript Effects:

  • Getting started
  • Setting up our HTML and CSS
  • Setting up the effects with Mootools
    • The basics
    • The ‘next’ and ‘previous’ links
  • Wrapping it up

prototype-ui-carousel

Prototype’s UI. Carousel is an advanced class that handles a carousel of elements in a page. A very well explained documentation is available for this class. The carousel can be either vertical or horizontal, works with liquid layout and is designed by CSS.

Comment via Facebook

comments

Leave a Reply


* = required fields

  (will not be published)


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

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.