Karusel is a simple carousel plugin for jQuery Mobile.
You can visit the demo page at http://antonmaju.github.com/karusel
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>
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.
-
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 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.
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 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
});