Using the custom events

JavaScript:close x

$("#foo1").carouFredSel({
	auto	: false,
	scroll	: {
		duration : 0.5
	}
}).find("li").click(function() {
	var deviation = parseInt( $("#foo1_deviation").val() );
	$("#foo1").trigger("slideTo", [$(this), deviation]);
}).css("cursor", "pointer");

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>
</div>

CSS:close x

.list_carousel {
	padding: 15px 0 15px 40px;
}
.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;
}
.clearfix {
	float: none;
	clear: both;
}

JavaScript:close x

$("#foo2").carouFredSel({
	auto	: {
		button			: "#foo2_play"
	},
	scroll	: {
		duration		: 1000,
		pauseDuration	: 2000
	}
}).trigger("pause");

HTML:close x

<div class="image_carousel">
	<div id="foo2">
		<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
	<a id="foo2_play" class="play" href="#"><span>&gt;</span></a>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
a.play {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 45px;
	display: block;
	position: absolute;
	top: 185px;
	left: 50%;
	margin-left: -22px;
}
a.play {				background-position: -150px 0; }
a.play:hover {			background-position: -150px -50px; }
a.play.paused {			background-position: -100px 0; }
a.play.paused:hover {	background-position: -100px -50px; }
a.play span {			display: none; }
.clearfix {
	float: none;
	clear: both;
}