ender-carousel

Ender-carousel is a really simple carousel plugin for Ender. You can easily build your own gallery on the top of this plugin. It's just 1.7 KByte (minified and gzipped).

It requires Jeesh and Morpheus. Currently it's tested in Chrome, Firefox, Safari, Opera and IE7+. You can report report bugs here. It's even compatible with jQuery and Zepto! So if you want to include it in a jQuery/Zepto based project, you can do it without any extra work.

If you want to use CSS3 transitions instead of JS animations, just set the "css3transition" property to true. Only recent Firefox and Webkit based browsers will use transitions. Older browsers will fall back to JS animations.

You might be interested in ender-overlay, which is a dialog/overlay solution for ender.

I got a lot inspiration from jQuery Tools, thanks for that.

Demos

Download Source

The source is hosted at Github.

Download v0.1.6

Carousel configuration

Please note that every element selectors will be applied inside the element you called the $.carousel method on. More info in the Basic Configuration Tutorial.

Property Default Value Description
window ".window" The selector for the window element.
items "li" The selector for the items.
pager null Optional selector for a pager list element.
nextPager "a.next" Selector for the pager leads to the next page.
prevPager "a.prev" Selector for the pager leads to the previous page.
activeClass null Optional class name to be applied to currently visible items.
disabledClass "disabled" This class will be added to the appropriate pager element when it's not clickable.
duration 400 The duration of the scrolling animation.
vertical false Vertically aligned carousel logic.
keyboard false Adds keyboard support.
css3transition false Experimental! You can start using CSS transitions instead of JS animations. This feature is currently limited to recent versions of Firefox and Webkit based browsers. It will fall back to JS animations if transition is not supported by the browser.
extraOffset 0 The size of the pages are calculated automatically. If you have drop shadow on your elements, the shadow of the last element might be cut off. You can adjust the position of the last element with this property. (currently only right offset is supported)

Methods

The $.carousel method will return the Carousel object. And you can call the following methods on it.

Method Description
getPageSize() Returns the size of one page.
getCursor() Returns the place of the cursor. The cursor stays at the first visible item. It's a zero based index.
nextPage() Jumps to the next page if it's available.
prevPage() Jumps to the previous page if it's available.
isVisibleItem(idx) Is the item at the given index visible?
scrollToItem(idx) Scroll to the item at the given index. It's a zero based index.
getOptions() Returns the current overlay options.
setOptions(options) You can update the options any time with this method.

Author

I'm Andras Nemeseri a Hungarian front-end developer. You can follow me on Twitter.
Thanks to Dustin Diaz & Jacob Thornton for Ender.