Code examples for the custom events

In all these examples, a carousel is created using the following code:

$(function() {
	$("#foo").carouFredSel();
});

The play-event

//	no options
$("#foo").trigger("play");

//	play carousel backward
$("#foo").trigger("play", "prev");

//	waint an additional second before scrolling
$("#foo").trigger("play", 1000);

//	resume a stopped carousel
$("#foo").trigger("play", true);

To combine options, place them in an array:

//	resume a stopped carousel after waiting an additional second
$("#foo").trigger("play", [1000, true]);

//	play carousel backward after waiting an additional second
$("#foo").trigger("play", ["prev", 1000]);

//	resume a stopped carousel backward after waiting an additional second
$("#foo").trigger("play", ["prev", 1000, true]);

The pause-event

//	pause the timeout between transitions
$("#foo").trigger("pause");

//	pause the transitions
$("#foo").trigger("pause", true);

//	resume the timeout after the pause
$("#foo").trigger("pause", [null, true]);

The stop-event

//	stop a carousel from automatically scrolling
$("#foo").trigger("stop");

//	stop the transition
$("#foo").trigger("stop", true);

The finish-event

//	immediately finish a scrolling carousel
$("#foo").trigger("finish");

The resume-event

//	immediately resume a stopped carousel
$("#foo").trigger("resume");

The prev-event

//	no options
$("#foo").trigger("prev");

//	scroll using custom configuration options
$("#foo").trigger("prev", {
	fx			: "fade",
	duration	: 300
});

//	scroll three items
$("#foo").trigger("prev", 3);

//	set a custom onAfter-callback function
$("#foo").trigger("prev", function( oldItems, newItems, newSizes ) {
	newItems.addClass( "foo" );
});

Combine options, the order of the options is not important.

//	scroll three items with a custom onAfter-callback function using custom configuration options
$("#foo").trigger("prev", [3, function( o, n, s ) {
	n.addClass( "foo" );
}, {
	fx			: "fade",
	duration	: 300
}]);

The next-event

See the description for the prev-event.

The slideTo-event

//	scroll to the third item
$("#foo").trigger("slideTo", 2);

//	scroll to an item using a jQuery selector
$("#foo").trigger("slideTo", "img.selected");

//	scroll to an item using a jQuery object
$("#foo").trigger("slideTo", $(this));

//	scroll to the item two items left of the targeted item
$("#foo").trigger("slideTo", [$(this), -2]);

//	scroll to the third item in the original item order
$("#foo").trigger("slideTo", [2, true]);

//	scroll to the third item using custom configuration options
$("#foo").trigger("slideTo", [2, {
	fx			: "fade",
	duration	: 300
}]);

//	scroll backward to the third item
$("#foo").trigger("slideTo", [2, "prev"]);

//	scroll forward to the third item
$("#foo").trigger("slideTo", [2, "next"]);

Note: The order of the options for the slideTo-custom event is not important.

The prevPage-event

//	no options
$("#foo").trigger("prevPage");

//	scroll using custom configuration options
$("#foo").trigger("prevPage", {
	fx			: "fade",
	duration	: 300
});

//	set a custom onAfter-callback function
$("#foo").trigger("prevPage", function( oldItems, newItems, newSizes ) {
	newItems.addClass( "foo" );
});

Note: The order of the options for the prevPage-custom event is not important.

The nextPage-event

See the description for the prevPage-event.

The slideToPage-event

//	scroll to the third page
$("#foo").trigger("slideToPage", 2);

//	scroll to the third page using custom configuration options
$("#foo").trigger("slideToPage", [2, {
	fx			: "fade",
	duration	: 300
}]);

//	scroll backward to the third page
$("#foo").trigger("slideToPage", [2, "prev"]);

//	scroll forward to the third page
$("#foo").trigger("slideToPage", [2, "next"]);

Note: The order of the options for the slideToPage-custom event is not important.

The queue-event

//	get the entire queue using the triggerHandler-method
console.log( $("#foo").triggerHandler("queue") );

//	get the entire queue using the callback function
$("#foo").trigger("queue", function( q ) {
	console.log( q );
});

//	add scrolling 2 items forward to the queue
$("#foo").trigger("queue", ["next", 2]);

//	add scrolling 2 items forward to the queue usint constom configuration options
$("#foo").trigger("queue", ["next", [2, {
	fx			: "fade",
	duration	: 300
}]]);

//	add scrolling 1 item backward to the queue usint constom configuration options and a custom callback function
$("#foo").trigger("queue", ["next", [1, {
	fx			: "fade",
	duration	: 300
}, function( o, n, s ) {
	n.addClass( "foo" );
}]]);

//	set the entire queue
var q = [
	//	first, scroll 2 items forward
	["next", 2],

	//	second, scroll 3 items backward
	["prev", 3],

	//	third, scroll 1 item forward using custom configuration options and a custom callback function
	["next",
		[1, {
				fx			: "fade",
				duration	: 300
			}, function( o, n, s ) {
				n.addClass( "foo" );
			}
		]
	]
];
$("#foo").trigger("queue", q);

The insertItem-event

//	insert a string of HTML
$("#foo").trigger("insertItem", '<img src="path/to/img.jpg" />');

//	insert an item using a jQuery selector
$("#foo").trigger("insertItem", "#wrapper img:first");

//	insert an item using a jQuery object
$("#foo").trigger("insertItem", $(this));

//	insert an item at the end of the list in the current item order
$("#foo").trigger("insertItem", [$(this), "end"]);

//	insert an item at the end of the list in the original item order
$("#foo").trigger("insertItem", [$(this), "end", true]);

//	insert an item before the third item
$("#foo").trigger("insertItem", [$(this), 2]);

//	use a jQuery selector to select the position where to insert the item
$("#foo").trigger("insertItem", [$(this), "#foo img:eq(4)"]);

//	insert an item before the third item in the original item order
$("#foo").trigger("insertItem", [$(this), 2, true]);

//	insert an item two items left of the targeted item
$("#foo").trigger("insertItem", [$(this), "#foo img:eq(4)", -2]);

Note: The order of the options for the insertItem-custom event is not important.

The removeItem-event

//	remove the third item
$("#foo").trigger("removeItem", 2);

//	remove an item using a jQuery selector
$("#foo").trigger("removeItem", "img.selected");

//	remove an item using a jQuery object
$("#foo").trigger("removeItem", $(this));

//	remove the third item in the original item order
$("#foo").trigger("removeItem", [2, true]);

//	remove the item two items left of the targeted item
$("#foo").trigger("removeItem", [$(this), -2]);

Note: The order of the options for the removeItem-custom event is not important.

The onBefore-event

//	add a new function to the next onBefore-callback.
$("#foo").trigger("onBefore", function( o, n, s ) {
	n.addClass( "foo" );
});

The onAfter-event

See the description for the onBefore-event.

The configuration-event

//	get the entire configuration object using the triggerHandler-method
console.log( $("#foo").triggerHandler("configuration") );

//	get the entire configuration object using the callback function
$("#foo").trigger("configuration", function( options ) {
	console.log( options );
});

//	get the value for a certain option using the triggerHandler-method
var direction = $("#foo").triggerHandler("configuration", "direction");
alert( "The carousel scrolls in this direction: " + direction );

var visible = $("#foo").triggerHandler("configuration", "items.visible");
alert( "The carousel has " + visible + " items visible" );

//	get the value for a certain option using the callback function
$("#foo").trigger("configuration", ["direction", function( value ) {
	alert( "The carousel scrolls in this direction: " + value );
}]);
$("#foo").trigger("configuration", ["items.visible", function( value ) {
	alert( "The carousel has " + value + " items visible" );
}]);

//	set a value for a certain option
$("#foo").trigger("configuration", ["direction", "up"]);
$("#foo").trigger("configuration", ["items.visible", 3]);

//	set a value, but don't reinitiate the carousel
$("#foo").trigger("configuration", ["auto.duration", 300, false]);

//	set a map of options
$("#foo").trigger("configuration", {
	direction	: "up",
	items: {
		visible		: 3
	},
	auto: {
		fx			: "fade",
		duration	: 300
	}
});

Note: The order of the options in the configuration-custom event should not be altered.

The synchronise-event

//	synchronise the carousels spedified in the configuration
$("#foo").trigger("synchronise");

//	synchronise a custom carousel
$("#foo").trigger("synchronise", "#foo_2");

//	synchronise a custom carousel without inheriting the scrolling options
$("#foo").trigger("synchronise", ["#foo_2", false]);

//	synchronise a custom carousel without inheriting the scrolling options and scroll in the opposite direction
$("#foo").trigger("synchronise", ["#foo_2", false, false]);

//	synchronise a custom carousel with a deviation of 2 items
$("#foo").trigger("synchronise", ["#foo_2", true, true, 2]);

The linkAnchors-event

//	no options: link the anchors with class="caroufredsel" inside the body
$("#foo").trigger("linkAnchors");

//	link the anchors with class="caroufredsel" inside the div with id="wrapper"
$("#foo").trigger("linkAnchors", "div#wrapper");

//	link the anchors with class="custom" inside the div with id="wrapper"
$("#foo").trigger("linkAnchors", ["div#wrapper", ".custom"]);

The updateSizes-event

$("#foo").trigger("updateSizes");

The currentPosition-event

//	get the current position using the triggerHandler-method
var pos = $("#foo").triggerHandler("currentPosition");
alert( "The carousel is at item number " + pos );

//	get the current position using the callback function
$("#foo").trigger("currentPosition", function( pos ) {
	alert( "The carousel is at item number " + pos );
});

The currentPage-event

//	get the current page number using the triggerHandler-method
var page = $("#foo").triggerHandler("currentPage");
alert( "The carousel is at page number " + page );

//	get the current page number using the callback function
$("#foo").trigger("currentPage", function( page ) {
	alert( "The carousel is at page number " + page );
});

The currentVisible-event

//	get a jQuery object of the current visible items using the triggerHandler-method
var items = $("#foo").triggerHandler("currentVisible");
items.addClass( "foo" );

//	get a jQuery object of the current visible items using the callback function
$("#foo").trigger("currentVisible", function( items ) {
	items.addClass( "foo" );
});

The slice-event

//	get a jQuery object of the third item (from the original order) using the triggerHandler-method
var item = $("#foo").triggerHandler("slice", [3, 4]);
item.addClass( "foo" );

//	get a jQuery object of the third, fourth and fifth items (from the original order) using the triggerHandler-method
var items = $("#foo").triggerHandler("slice", [3, 6]);
items.addClass( "foo" );

//	get a jQuery object of the third item (from the original order) using the callback function
$("#foo").trigger("slice", [3, 4, function( item ) {
	item.addClass( "foo" );
}]);

The isScrolling-event

//	find out whether the carousel is scrolling using the triggerHandler-method
var scrolling = $("#foo").triggerHandler("isScrolling");
if ( scrolling ) {
	$("#foo").addClass( "scrolling" );
} else {
	$("#foo").removeClass( "scrolling" );	
}

//	find out whether the carousel is scrolling using the callback function
$("#foo").trigger("isScrolling", function( scrolling ) {
	if ( scrolling ) {
		$(this).addClass( "scrolling" );
	} else {
		$(this).removeClass( "scrolling" );	
	}
});

The isPaused-event

See the description for the isScrolling-event.

The isStopped-event