Variable item-sizes and a variable number of visible items

Carousel with variable item-sizes

A carousel with variable item-width:

items have a variable width
3 items with visible
1 items scrolled at a time
width of carousel adjusts automatically

prev next

JavaScript:close x

$("#foo1").carouFredSel({
	items	: 3,
	scroll	: {
		items			: 1,
		duration		: 1000,
		pauseDuration	: 2000
	},
	auto	: false,
	prev	: "#foo1_prev",
	next	: "#foo1_next"
}).parent().css("margin", "auto");

HTML:close x

<div class="list_carousel">
	<ul id="foo1">
		<li style="width: 250px;"> c </li>
		<li style="width: 50px;"> a </li>
		<li style="width: 250px;"> r </li>
		<li style="width: 150px;"> o </li>
		<li style="width: 50px;"> u </li>
		<li style="width: 50px;"> F </li>
		<li style="width: 150px;"> r </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 250px;"> d </li>
		<li style="width: 150px;"> S </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 150px;"> l </li>
		<li style="width: 50px;"> : </li>
		<li style="width: 150px;">   </li>
		<li style="width: 50px;"> a </li>
		<li style="width: 50px;"> n </li>
		<li style="width: 250px;">   </li>
		<li style="width: 150px;"> i </li>
		<li style="width: 250px;"> n </li>
		<li style="width: 150px;"> f </li>
		<li style="width: 250px;"> i </li>
		<li style="width: 50px;"> n </li>
		<li style="width: 150px;"> i </li>
		<li style="width: 50px;"> t </li>
		<li style="width: 150px;"> e </li>
		<li style="width: 50px;"> , </li>
		<li style="width: 50px;">   </li>
		<li style="width: 150px;"> c </li>
		<li style="width: 250px;"> i </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 150px;"> c </li>
		<li style="width: 150px;"> u </li>
		<li style="width: 150px;"> l </li>
		<li style="width: 150px;"> a </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 150px;">   </li>
		<li style="width: 250px;"> j </li>
		<li style="width: 150px;"> Q </li>
		<li style="width: 150px;"> u </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 150px;"> y </li>
		<li style="width: 50px;">   </li>
		<li style="width: 50px;"> c </li>
		<li style="width: 50px;"> a </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 150px;"> o </li>
		<li style="width: 250px;"> u </li>
		<li style="width: 250px;"> s </li>
		<li style="width: 50px;"> e </li>
		<li style="width: 50px;"> l </li>
		<li style="width: 250px;"> . </li>
		<li style="width: 150px;"> . </li>
		<li style="width: 150px;"> . </li>
		<li style="width: 250px;">   </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>

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;
}
.clearfix {
	float: none;
	clear: both;
}

Carousel with variable item-sizes AND a variable number of visible items

A carousel with a variable number of visible items.

items have a variable width
variable number of items visible
items center in the carousel

prev next

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo2").carouFredSel({
	width	: 870,
	scroll	: 2000,
	auto	: false,
	prev	: "#foo2_prev",
	next	: "#foo2_next"
});

HTML:close x

<div class="list_carousel">
	<ul id="foo2">
		<li style="width: 250px;"> c </li>
		<li style="width: 250px;"> a </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 50px;"> o </li>
		<li style="width: 150px;"> u </li>
		<li style="width: 50px;"> F </li>
		<li style="width: 250px;"> r </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 150px;"> d </li>
		<li style="width: 50px;"> S </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 50px;"> l </li>
		<li style="width: 50px;"> : </li>
		<li style="width: 150px;">   </li>
		<li style="width: 250px;"> a </li>
		<li style="width: 250px;"> n </li>
		<li style="width: 150px;">   </li>
		<li style="width: 50px;"> i </li>
		<li style="width: 250px;"> n </li>
		<li style="width: 250px;"> f </li>
		<li style="width: 50px;"> i </li>
		<li style="width: 250px;"> n </li>
		<li style="width: 50px;"> i </li>
		<li style="width: 250px;"> t </li>
		<li style="width: 250px;"> e </li>
		<li style="width: 50px;"> , </li>
		<li style="width: 50px;">   </li>
		<li style="width: 150px;"> c </li>
		<li style="width: 150px;"> i </li>
		<li style="width: 250px;"> r </li>
		<li style="width: 50px;"> c </li>
		<li style="width: 150px;"> u </li>
		<li style="width: 150px;"> l </li>
		<li style="width: 150px;"> a </li>
		<li style="width: 250px;"> r </li>
		<li style="width: 250px;">   </li>
		<li style="width: 150px;"> j </li>
		<li style="width: 150px;"> Q </li>
		<li style="width: 250px;"> u </li>
		<li style="width: 50px;"> e </li>
		<li style="width: 250px;"> r </li>
		<li style="width: 150px;"> y </li>
		<li style="width: 150px;">   </li>
		<li style="width: 250px;"> c </li>
		<li style="width: 50px;"> a </li>
		<li style="width: 50px;"> r </li>
		<li style="width: 150px;"> o </li>
		<li style="width: 250px;"> u </li>
		<li style="width: 50px;"> s </li>
		<li style="width: 50px;"> e </li>
		<li style="width: 150px;"> l </li>
		<li style="width: 50px;"> . </li>
		<li style="width: 50px;"> . </li>
		<li style="width: 150px;"> . </li>
		<li style="width: 50px;">   </li>
	</ul>
	<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

.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;
}
.clearfix {
	float: none;
	clear: both;
}

More examples

Basic carousels.
Carousels scrolled by user interaction.
Variable item-sizes + variable number of visible items.
Responsive / fluid carousels.
Continuously scrolling carousels.
Using the callback functions.
Using the custom events.
Intermediate carousel examples.
Dynamically add and remove items.
GET and (re)SET the configuration options.
Carousels in combination with lightbox- and tooltip-plugins.
Cool Carousel examples (inspiration)

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

Download version 5.5.0

Variable item-sizes and a variable number of visible items

Carousel with variable item-sizes

Carousel with variable item-sizes AND a variable number of visible items

More examples