Carousel's content can be defined either programmatically or declaratively. For programmatic way, define
provide the data using the datasource option where the value can be a javascript array or a function that returns
data usually by connecting to a remote source. Declarative approach simply requires a list element with "li" items as children.
$('#list').puicarousel();
<ul id="list"></ul>
Note: Carousel requires touchswipe plugin for swipe support.
| Name |
Type |
Default |
Description |
| datasource |
Array/Function |
null |
Datasource for the carousel, valid options are an array and a function to load data. |
| numVisible |
Integer |
3 |
Number of visible items per page. |
| firstVisible |
Integer |
0 |
Index of the first visible item. |
| headerText |
String |
null |
Text of the header section. |
| effectDuration |
Integer |
500 |
Duration of the scrolling animation in milliseconds. |
| circular |
Boolean |
false |
Defines continuous scrolling. |
| breakpoint |
Integer |
560 |
Breakpoint value in pixels to switch between small and large viewport. |
| itemContent |
Function |
null |
Function to provide item content as string or jQuery object. |
| responsive |
Boolean |
true |
Breakpoint value in pixels to switch between small and large viewport. |
| autoplayInterval |
Integer |
0 |
Time in milliseconds to have carousel start scrolling automatically. |
| easing |
String |
easeInOutCirc |
Easing animation to use for scrolling. |
| pageLinks |
String |
3 |
Number of maximum page links to display. If total page count exceeds this value a dropdown is displayed instead. |
| style |
String |
null |
Inline style of the main wrapper element. |
| styleClass |
String |
null |
Style class for the main wrapper element. |
| template |
jQuery |
null |
Template element as jQuery object. |
| Name |
Parameters |
Description |
| pageChange |
ui.page: index of the new page |
Fired when carousel page changes. |
Example
$('#default').puicarousel({
pageChange: function(event, ui) {
//...
}
});
| Name |
Parameters |
Description |
| setPage |
index: Index of the page to navigate to. |
Enable the widget |
| option |
name: Name of the option |
Returns the value of the option. |
| option |
name: Name of the option, value: Value of the option |
Set the value of the option. |
Example
$('#default').puicarousel('setPage', 3);
$(function() {
var cars = [
{'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
{'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
{'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
{'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
{'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
{'brand': 'Jaguar', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
{'brand': 'BMW', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
{'brand': 'Fiat', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
{'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'}
];
$('#cars1').puicarousel({
headerText: 'Local Javascript Array',
datasource: cars,
itemContent: function(car) {
var content = $('<div class="ui-grid ui-grid-responsive"></div>');
content.append('<div class="ui-grid-row"><div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/' + car.brand + '.gif" /></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Vin</div><div class="ui-grid-col-6">' + car.vin + ' </div></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Year</div><div class="ui-grid-col-6">' + car.year + ' </div></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Color</div><div class="ui-grid-col-6">' + car.color + ' </div></div>');
return content;
}
});
$('#cars2').puicarousel({
headerText: 'Remote DataSource',
pageLinks: 5,
datasource: function(callback) {
$.ajax({
type: "GET",
url: 'showcase/resources/data/cars-medium.json',
dataType: "json",
context: this,
success: function(response) {
callback.call(this, response.slice(0,15));
}
});
},
itemContent: function(car) {
var content = $('<div class="ui-grid ui-grid-responsive"></div>');
content.append('<div class="ui-grid-row"><div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/' + car.brand + '.gif" /></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Vin</div><div class="ui-grid-col-6">' + car.vin + ' </div></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Year</div><div class="ui-grid-col-6">' + car.year + ' </div></div>')
.append('<div class="ui-grid-row"><div class="ui-grid-col-6">Color</div><div class="ui-grid-col-6">' + car.color + ' </div></div>');
return content.html();
}
});
$('#cars3').puicarousel({
headerText: 'Enhanced Markup'
});
});
<ul id="cars1"></ul>
<ul id="cars2"></ul>
<p-carousel datasource="Showcase.demo.cars" headertext="PrimeElement" renderdelay="10">
<template>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/{{brand}}.gif" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">{{vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">{{year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">{{color}}</div>
</div>
</div>
</template>
</p-carousel>
<ul id="cars3">
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Volkswagen.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">dsad231ff </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2012 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Audi.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">gwregre345 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2011 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Black </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Renault.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">h354htr </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2005 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Gray </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/BMW.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">j6w54qgh </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2003 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Blue </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Mercedes.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">hrtwy34 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">1995 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Jaguar.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">jejtyj </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2005 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Black </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/BMW.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">g43gr </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2012 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Yellow </div>
</div>
</div>
</li>
<li class="ui-carousel-item ui-widget-content ui-corner-all" style="width: 349px;">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Fiat.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">greg34 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2013 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/Ford.gif">
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Vin</div>
<div class="ui-grid-col-6">h54hw5 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Year</div>
<div class="ui-grid-col-6">2000 </div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-6">Color</div>
<div class="ui-grid-col-6">Black </div>
</div>
</div>
</li>
</ul>
Usage
Carousel's datasource can either be a name of an array or a function to load the array. Content for each item is defined
as a mustache template where properties of an object can be access via {{}} syntax.
<p-carousel datasource="CarouselDemo.cars" headertext="PrimeElement">
<template>
Access color of a car using {{color}}
</template>
</p-carousel>
Array
var CarouselDemo = {
cars: [
{'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
{'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
{'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
{'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
{'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
{'brand': 'Jaguar', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
{'brand': 'BMW', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
{'brand': 'Fiat', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
{'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'}
]
};
Function
var CarouselDemo = {
cars: function(callback) {
$.ajax({
type: "GET",
url: 'rest/cars/list',
dataType: "json",
context: this,
success: function(response) {
callback.call(this, response);
}
});
}
};
Attributes
| Name |
Type |
Default |
Description |
| datasource |
Array/Function |
null |
Datasource for the carousel, valid options are an array and a function to load data. |
| numvisible |
Integer |
3 |
Number of visible items per page. |
| firstvisible |
Integer |
0 |
Index of the first visible item. |
| headertext |
String |
null |
Text of the header section. |
| effectduration |
Integer |
500 |
Duration of the scrolling animation in milliseconds. |
| circular |
Boolean |
false |
Defines continuous scrolling. |
| breakpoint |
Integer |
560 |
Breakpoint value in pixels to switch between small and large viewport. |
| responsive |
Boolean |
true |
Breakpoint value in pixels to switch between small and large viewport. |
| autoplayinterval |
Integer |
0 |
Time in milliseconds to have carousel start scrolling automatically. |
| easing |
String |
easeInOutCirc |
Easing animation to use for scrolling. |
| pagelinks |
String |
3 |
Number of maximum page links to display. If total page count exceeds this value a dropdown is displayed instead. |
| style |
String |
null |
Inline style of the main wrapper element. |
| styleclass |
String |
null |
Style class for the main wrapper element. |
| onpagechange |
function |
null |
Name of the function to invoke when carousel page changes. |
Vindsad231ffYear2012ColorWhite
Vingwregre345Year2011ColorBlack
Vinh354htrYear2005ColorGray
Vinj6w54qghYear2003ColorBlue
Vinhrtwy34Year1995ColorWhite
VinjejtyjYear2005ColorBlack
Vingreg34Year2013ColorWhite
Vinh54hw5Year2000ColorBlack