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>
$(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="pui-grid pui-grid-responsive"></div>');
content.append('<div class="pui-grid-row"><div class="pui-grid-col-12"><img src="resources/demo/images/car/' + car.brand + '.gif" /></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Vin</div><div class="pui-grid-col-6">' + car.vin + ' </div></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Year</div><div class="pui-grid-col-6">' + car.year + ' </div></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Color</div><div class="pui-grid-col-6">' + car.color + ' </div></div>');
return content;
}
});
$('#cars2').puicarousel({
headerText: 'Remote DataSource',
pageLinks: 5,
datasource: function(callback) {
$.ajax({
type: "GET",
url: 'rest/cars/list',
dataType: "json",
context: this,
success: function(response) {
callback.call(this, response.slice(0,15));
}
});
},
itemContent: function(car) {
var content = $('<div class="pui-grid pui-grid-responsive"></div>');
content.append('<div class="pui-grid-row"><div class="pui-grid-col-12"><img src="resources/demo/images/car/' + car.brand + '.gif" /></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Vin</div><div class="pui-grid-col-6">' + car.vin + ' </div></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Year</div><div class="pui-grid-col-6">' + car.year + ' </div></div>')
.append('<div class="pui-grid-row"><div class="pui-grid-col-6">Color</div><div class="pui-grid-col-6">' + car.color + ' </div></div>');
return content;
}
});
$('#cars3').puicarousel({
headerText: 'Enhanced Markup'
});
$('#doc').puitabview();
});
<ul id="cars1"></ul>
<ul id="cars2"></ul>
<ul id="cars3">
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Volkswagen.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">dsad231ff </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2012 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Audi.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">gwregre345 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2011 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Black </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Renault.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">h354htr </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2005 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Gray </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/BMW.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">j6w54qgh </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2003 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Blue </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Mercedes.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">hrtwy34 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">1995 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Jaguar.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">jejtyj </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2005 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Black </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/BMW.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">g43gr </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2012 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Yellow </div>
</div>
</div>
</li>
<li class="pui-carousel-item ui-widget-content ui-corner-all" style="width: 349px;">
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Fiat.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">greg34 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2013 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">White </div>
</div>
</div>
</li>
<li>
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-12"><img src="resources/demo/images/car/Ford.gif">
</div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Vin</div>
<div class="pui-grid-col-6">h54hw5 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Year</div>
<div class="pui-grid-col-6">2000 </div>
</div>
<div class="pui-grid-row">
<div class="pui-grid-col-6">Color</div>
<div class="pui-grid-col-6">Black </div>
</div>
</div>
</li>
</ul>