Carousels scrolled by user interaction

A carousel scrolled only via the "previous" and "next" buttons:

prev next

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo1").carouFredSel({
	auto : false,
	prev : "#foo1_prev",
	next : "#foo1_next"
});

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>
	<a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo1_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;
}

A carousel scrolled only via the "left" and "right" keys on your keyboard:

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo2").carouFredSel({
	auto : false,
	prev : "left",
	next : "right"
});

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>
</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;
}

A carousel scrolled only via pagination:

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo3").carouFredSel({
	auto		: false,
	pagination	: "#foo3_pag"
});

HTML:close x

<div class="image_carousel">
	<div id="foo3">
		<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 class="pagination" id="foo3_pag"></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;
}
.pagination {
	text-align: center;
}
.pagination a {
	background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

A carousel scrolled by swiping (or dragging on non-touch-devices):

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo4").carouFredSel({
	auto		: false,
	swipe		: {
		onTouch		: true,
		onMouse		: true
	}
});

HTML:close x

<div class="image_carousel">
	<div id="foo4">
		<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;
}

A carousel scrolled via the "previous" and "next" buttons, the "left" and "right" keys, the pagination and the 1 - 9 keys.
All with custom configuration:

NON-circular and NON-infinite
the prev object scrolls 2 items in 750 milliseconds using the "easeInOutCubic" transition
the next object scrolls 4 items in 1500 milliseconds using the "easeInQuart" transition
the pagination object scrolls during 3000 milliseconds using the "easeOutBounce" transition
(number of items depends on to what page it needs to scroll)

prev next

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo5").carouFredSel({
	circular	: false,
	infinite	: false,
	auto 		: false,
	prev : {
		button		: "#foo5_prev",
		key			: "left",
		items		: 2,
		easing		: "easeInOutCubic",
		duration	: 750
	},
	next : {
		button		: "#foo5_next",
		key			: "right",
		items		: 4,
		easing		: "easeInQuart",
		duration	: 1500
	},
	pagination : {
		container	: "#foo5_pag",
		keys		: true,
		easing		: "easeOutBounce",
		duration	: 3000
	}
});

HTML:close x

<div class="image_carousel">
	<div id="foo5">
		<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="foo5_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo5_next" href="#"><span>next</span></a>
	<div class="pagination" id="foo5_pag"></div>
</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.prev.disabled {	background-position: 0 -100px !important;  }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
a.next.disabled {	background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
	cursor: default;
}

a.prev span, a.next span {
	display: none;
}
.pagination {
	text-align: center;
}
.pagination a {
	background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

A carousel scrolled only via external links:

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo6 img").each(function(n) {
	$(this).attr("id", "item"+n);
});
$("#foo6").carouFredSel({
	auto: false
});
$("#foo6").trigger("linkAnchors", ["#links_below", "a"]);

HTML:close x

<div class="image_carousel">
	<div id="foo6">
		<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;
}

Clicking this link will scroll the carousel to the 3^rd item. Why? Because it has the class "caroufredsel".

<a href="#item2" class="caroufredsel">this link</a>

Clicking all the links below will also trigger the carousel to scroll, but those links don't have the class "caroufredsel". Why it still works? Because the linkAnchors custom event got triggered.

$("#foo5").trigger("linkAnchors", "#links_below");

Scroll to "basketballers".
Scroll to "tree on beach".
Scroll to "cupcakes".
Scroll to "hammock".
Scroll to "New York".
Scroll to "laundry".

Scroll to "mother and son".
Scroll to "lazy picknick".
Scroll to "large shoes".
Scroll to "Paris".
Scroll to "sunbading woman".
Scroll to "happy couple".

Note: Set items.start to true if you want the plugin to search for an item-anchor to start the carousel using the url-hashtag.
For example: http://domain.com#startitem

More examples

Need help with all those options? Click here to use the Configuration Robot >

Download version 6.2.1

Carousels scrolled by user interaction

More examples