Continuously scrolling carousels

JavaScript:close x

$("#foo1").carouFredSel({
	auto	: {
		items 			: 5,
		duration		: 7500,
		easing			: "linear",
		pauseDuration	: 0,
		pauseOnHover	: "immediate"
	}
});

HTML:close x

<div class="image_carousel">
	<div id="foo1">
		<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>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

JavaScript:close x

$("#foo2").carouFredSel({
	auto	: {
		items 			: 1,
		duration		: 1500,
		easing			: "linear",
		pauseDuration	: 0
	}
}).trigger("pause");

$("#foo2_prev").hover(function() {
	$("#foo2").trigger("configuration", ["direction", "right"]);
	$("#foo2").trigger("play");
}, function() {
	$("#foo2").trigger("pause");
}).click(function() {
	return false;
});

$("#foo2_next").hover(function() {
	$("#foo2").trigger("configuration", ["direction", "left"]);
	$("#foo2").trigger("play");
}, function() {
	$("#foo2").trigger("pause");
}).click(function() {
	return false;
});

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 class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</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.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;
}
.clearfix {
	float: none;
	clear: both;
}