Examples

Below is a collection of examples demonstrating basic and advanced usage of WaltzerJS. For further reference, consult the demo files that come bundled with the plugin download.

Demo 1

Scroll 1. View Demo

$('#carousel').waltzer();

Demo 2

Auto scroll 5, start at item 3. View Demo

$('#carousel').waltzer({
                   auto:true,
                   scroll:5, 
                   offset:2
               });

Demo 3

Scroll 4, non-circular. View Demo

$('#carousel').waltzer({
                   scroll:4, 
                   circular:false
               });

Demo 4

Scroll 4 with pager. View Demo

$('#carousel').waltzer({
                   scroll:4, 
                   pager:true,
                   navBtns:false
               });

Demo 5

Scroll 1, vertical, non-circular. View Demo

$('#carousel').waltzer({
		   vertical:true, 
		   circular:false,
		   speed:500
	       });

Demo 6

Scroll 2, vertical, specified navigation buttons. View Demo

$('#carousel').waltzer({
		   scroll:2, 
		   vertical:true,
		   speed:500,
		   left_nav_btn:'topNav', 
		   right_nav_btn:'botNav'
	       });

Demo 7

Auto scroll 5 with custom page counter. View Demo

var counter = function(){
    var currentPage = this.pageCount,
        itemCount = this.itemCount,
        scroll= this.options.scroll;
    $('#counter').html(currentPage+' / '+(itemCount / scroll));
}

$('#carousel').waltzer({
                   scroll:5,
		   auto: true,
		   autoPause: 10000,
		   onCreate: counter,
		   onComplete: counter
	       });

Demo 8

Auto scroll 4 with custom stop / start button. View Demo

$('#carousel').waltzer({
                   scroll:4,
		   auto: true,
		   autoPause: 8000
	       });

$('#control_btn').on('click', function(){
    if($(this).text() == 'Start') {
	$(this).text('Stop');
	$('#carousel').waltzer('stop');
    } else if($(this).text() == 'Stop') {
	$(this).text('Start');
	$('#carousel').waltzer('start');
    }				
});