GET and (re)SET the configuration options

Select an option and click the 1^st button to GET the configuration for a carousel after the plugin has been executed.

Optionally type in a valid value for the option and click 2^nd button to SET the configuration on-the-fly.
Have a look at the configuration-page for all possible values.

Please see the custom events-page for more information.

`o`	=	`option`	=		`+ "." +`		GET
`v`	=	`value`	=				SET

prev next

Select an option and click the button...

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo1").carouFredSel({
	prev	: "#foo1_prev",
	next	: "#foo1_next",
	scroll	: 5 
});
function get_option() {
	var opt  = $("#foo1_option").val(),
		sub  = $(".foo1_suboption:visible").val() || "";
	if (sub.length) {
		opt += "."+sub;
	}
	return opt;
}
function typecheck_value(val) {
	if (!isNaN(val)) 	val = parseInt(val);
	if (val == "true") 	val = true;
	if (val == "false")	val = false;
	return val;
}
$("#foo1_get").click(function() {
	var opt = get_option();
	$("#foo1").trigger("configuration", [opt, function( val ) {
		var txt = "<p>Value for <em>" + opt + "</em> : <em>" + val + "</em>.</p>";
		$("#foo1_log").html(txt);
	}]);						
	return false;
});
$("#foo1_set").click(function() {
	var opt = get_option(),
		val = typecheck_value($("#foo1_value").val()),
		txt = "<p><em>" + opt + "</em> set to <em>" + val + "</em>.</p>";
	$("#foo1").trigger("configuration", [opt, val]);
	$("#foo1_log").html(txt);
	return false;
});

HTML:close x

<div class="list_carousel">
	<ul id="foo1">
		<li> c </li>
		<li> a </li>
		<li> r </li>
		<li> o </li>
		<li> u </li>
		<li> F </li>
		<li> r </li>
		<li> e </li>
		<li> d </li>
		<li> S </li>
		<li> e </li>
		<li> l </li>
		<li> : </li>
		<li>   </li>
		<li> a </li>
		<li> n </li>
		<li>   </li>
		<li> i </li>
		<li> n </li>
		<li> f </li>
		<li> i </li>
		<li> n </li>
		<li> i </li>
		<li> t </li>
		<li> e </li>
		<li> , </li>
		<li>   </li>
		<li> c </li>
		<li> i </li>
		<li> r </li>
		<li> c </li>
		<li> u </li>
		<li> l </li>
		<li> a </li>
		<li> r </li>
		<li>   </li>
		<li> j </li>
		<li> Q </li>
		<li> u </li>
		<li> e </li>
		<li> r </li>
		<li> y </li>
		<li>   </li>
		<li> c </li>
		<li> a </li>
		<li> r </li>
		<li> o </li>
		<li> u </li>
		<li> s </li>
		<li> e </li>
		<li> l </li>
		<li> . </li>
		<li> . </li>
		<li> . </li>
		<li>   </li>
	</ul>
	<div class="clearfix"></div>
	<a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo1_next" href="#"><span>next</span></a>
	<div class="logbox" id="foo1_log"><p>Select an option and click the button...</p></div>
</div>

CSS:close x

.list_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 30px;
	color: #666;
	text-align: center;
	background-color: #f0f0f0;
	border: 5px solid #ccc;
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }

a.prev span, a.next span {
	display: none;
}
.logbox {
	background-color: #f9ffcc;
	border: 1px dotted #ff3300;
	padding: 10px 20px;
}
.logbox p {
	color: #ff3300;
	margin: 0;
}
.clearfix {
	float: none;
	clear: both;
}

7 Built in effects at your disposal

Pick an effect to apply it to the carousel.

auto.effect =

Infinity

A concept that in many fields refers to a quantity without bound or end.

Circular journey

An excursion in which the final destination is the same as the starting point.

jQuery

jQuery is a JavaScript library designed to simplify the client-side scripting.

Carousel

A carousel is an amusement ride consisting of a rotating circular platform with seats.