JavaScript
Article

Continuous Carousel Driven by jQuery UI

By Sam Deering

rcarousel01

I bet that as a child you liked to ride on a carousel (or a roundabout). I hated it, the motion sickness got me good! Anyway now as adults (or generally web developers) we can go back in time and also ride on some other kind of carousel. But this time a non-sicky JavaScript one. Probably all of you have heard about this kind of a widget before, there are lots of similar ones already written jQuery.

OK. Without further ado, I would like to introduce you rcarousel – a jQuery UI continuous carousel. It happens that, 2 days ago I released a new version – version 1.1. Let me talk about it. rcarousel is a jQuery UI widget. Just because of it, it shares all of its capabilities: custom events, nice API, etc. As of version 1.1, rcarousel is really simple to use. Just throw in some content (yeah, from now on, it supports any HTML content, not only images) into a container, e.g. a DIV and install the widget upon it. That’s it!

It is highly customizable. Just take a look at this example: http://ryrych.github.com/rcarousel/examples/html.html
But it does not have to look so complicated. You can run it with the Auto mode – without navigation. I think that the feature many of you may like is multi carousels on a page. There is no problem with having many of them in a one page.
rcarousel02

Custom number of visible elements and a step (number of elements to scroll by) allows you to tailor it to your needs. Another nice feature is loading elements on demand (at the run-time) via API. With little effort you can fetch XML, JSON, parse them and then add elements with ‘append’ method.

To keep this guest post (thanks!) short, let me outline other features:

• many options to choose from
• images (and any elements) with links
• vertical carousels
and much more!

When it comes to browser compatibility, rcarousel supports many of them. But if you are looking for 11-year browser support, then this carousel is not for you. Otherwise read on.
So, rcarousel was tested successfully in the following browsers:

• Internet Explorer 7+
• Firefox 3.0+
• Chrome
• Opera 10.10+
• Safari 4.0.5+

To recap. I write and maintain rcarousel in my spare time. I did my best to share with community all the best I learned. I did not write it for myself. No. I like this community, open source and sharing knowledge. I am open to patches, ideas, good words. If you could, please donate some bucks (your $5 is much worth in Poland than USA/foreign countries) to me. Unemployment is not an easy period in life (crisis sucks)!

PS – If you use a lightbox widget in your pages, consider using rlightbox2 (http://ryrych.github.com/rlightbox2/) – a jQuery UI mediabox, also written by myself.

About the author

Wojciech Ryrych is a Poland based front-end developer amateur. He is self-taught (no degree, yet) and keen on Linux, Open Source, and learning Engrish.

rcarousel page: http://ryrych.github.com/rcarousel/

No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.