Carousel Carousel displays content using a slide effect feauturing responsive mode, swipe support for touch enabled devices and various customization options.




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>
                                
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.
styleClass String null Style class for the main wrapper element.
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="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>