Karusel

Karusel is a simple carousel plugin for jQuery Mobile.

You can visit the demo page at http://antonmaju.github.com/karusel

How to Use

Add reference to karusel.js script, then you can call the karusel plugin directly.

$('#carousel').karusel(options);

Alternatively, you can use data-role attribute

<div id="carousel" data-role="karusel"></div>

Options

The available options are:

• source
  This option provides karusel a way to pull and render the data.

• loop
  Sets the karusel's loop behavior.
  The default is false.

• itemClass
  Sets the css class for individual item generated by karusel.
  The default is "item".

• itemsClass
  Sets the css class for items element generated by karusel.
  The default is "items".

• wrapperClass
  Sets the css class for wrapper element generated by karusel.
  The default is "karusel-wrapper".

• prevItemClass
  Sets the css class for wrapper element generated by karusel.
  The default is "prev-item".

• nextItemClass
  Sets the css class for wrapper element generated by karusel.
  The default is "next-item".

• parentPadding
  Sets the padding size for karusel. The default is 15 (pixels).
  You may change it based on your jQuery Mobile theme.

• itemSourceClass
  Sets the source item for karusel. This option is evaluated if the source option is not supplied.
  The default is 'item-source'.

• wrapperSourceClass
  Sets the wrapper source for karusel. This option is evaluated if the source option is not supplied. The default is 'wrapper-source'.

All options can be set via data attribute. So as an example, you can use data-loop attribute for loop option and data-item-class attribute for itemClass option.

Events

• itemscreated
  This event is trigerred anytime karusel renders its items. To use it, you need to bind the event to karusel selector.

  $('#carousel').bind('itemscreated', function(evt){ }).karusel();

Data Source

Data source object can be any object as long as it has the following methods.

{
	getDataAt: function(widget, index){
		//retrieve items from data source
		//widget : the instance of karusel
		//index : the index of desired item 
	},
	count: function(widget){
		//get total number of items
		//widget: the instance of karusel
	},
	render: function (widget, data, $item) {
        //render html representation of the data
		//widget: the instance of karusel
		//data: the data to be rendered
		//$item : jquery object representing item element
    }
}

There are 2 built-in data source classes, ArraySource and DomSource to ease the data source creation.

ArraySource

You use ArraySource to supply the data source from array. It has 1 constructor parameter, which is the array instance.

var arr =[1,2,3];

var store = new $.Karusel.ArraySource(arr);
$('#carousel').karusel({
	source: store
});

You may want to override its render method if your array item is custom object.

var arr=[{id:1, name:'John'}, {id:2,name:'Mary'}];

var store = new $.Karusel.ArraySource(arr);
store.render = function (widget, data, $item) {
	var html = '<div class="title">'+data.name+'</div>';
	$item.html(html);
};

$('#carousel').karusel({
	source: store
});

DomSource

DomSource is the default data source. You define the data source from the existing DOM element. Given the following HTML element

<ol class="wrapper-source">
	<li class="item-source"><span>Item 1</span></li>
	<li class="item-source"><span>Item 2</span></li>
</ol>

You will need to supply itemSelector and wrapperSelector option to DomSource class.

var store = new $.Karusel.DomSource({
	itemSource: 'item-source',
	wrapperSource: 'wrapper-source'
});
$('#carousel').karusel({
	source: store
});