Intermediate carousels

Thumbnail navigation

Add thumbnails to navigate through the slides using the atuo.anchorBuilder function.
Also, this carousel uses the "crossfade" 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.

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo1").carouFredSel({
	items		: 1,
	scroll		: {
		fx			: "crossfade"
	},
	auto		: false,
	pagination	: {
		container		: "#foo1_pag",
		anchorBuilder	: function( nr, item ) {
			var src = $("img", item).attr( "src" );
				src = src.replace( "/large/", "/small/");
			return '<img src="' + src + '" />';
		}
	}
});

HTML:close x

<div class="html_carousel">
	<div id="foo1">
		<div class="slide">
			<img src="/examples/images/large/carousel_1.jpg" alt="carousel 1" width="870" height="400" />
			<div>
				<h4>Infinity</h4>
				<p>A concept that in many fields refers to a quantity without bound or end.</p>
			</div>
		</div>
		<div class="slide">
			<img src="/examples/images/large/carousel_2.jpg" alt="carousel 2" width="870" height="400" />
			<div>
				<h4>Circular journey</h4>
				<p>An excursion in which the final destination is the same as the starting point.</p>
			</div>
		</div>
		<div class="slide">
			<img src="/examples/images/large/carousel_3.jpg" alt="carousel 3" width="870" height="400" />
			<div>
				<h4>jQuery</h4>
				<p>jQuery is a JavaScript library designed to simplify the client-side scripting.</p>
			</div>
		</div>
		<div class="slide">
			<img src="/examples/images/large/carousel_4.jpg" alt="carousel 4" width="870" height="400" />
			<div>
				<h4>Carousel</h4>
				<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
			</div>
		</div>
	</div>
	<div class="clearfix"></div>
	<div class="thumbnails" id="foo1_pag"></div>
</div>

CSS:close x

.html_carousel {
	padding: 15px 0 15px 40px;
}
.html_carousel div.slide {
	position: relative;
}
.html_carousel div.slide div {
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	display: none;
	position: absolute;
	bottom: 0;
}
.html_carousel div.slide h4 {
	font-size: 35px;
	padding: 30px 0 0 100px;
}
.html_carousel div.slide p {
	font-size: 16px;
	padding: 0 0 30px 100px;
}
.html_carousel div.slide h4, .html_carousel div.slide p {
	color: white;
	margin: 0;
}
div.thumbnails {
	text-align: center;
}
div.thumbnails img {
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: inline-block;
}
div.thumbnails img:hover {
	background-color: #eee;
}
div.thumbnails img.selected {
	background-color: #ccc;
}
.clearfix {
	float: none;
	clear: both;
}

Timer

Set a timer to visualize the remaining time before scrolling again.

view JavaScript view HTML view CSS

JavaScript:close x

var timerWidth = 870;
$("#foo2").carouFredSel({
	scroll	: 5,
	auto	: {
		pauseOnHover: "resume",
		onPauseStart: function( percentage, duration ) {
			$("#foo2_timer").stop().animate(
			  { width	: timerWidth },
			  { duration: duration,
			    easing	: "linear" }
			);
		}, 
		onPausePause: function( percentage, duration ) {
			$("#foo2_timer").stop();
		},
		onPauseEnd: function( percentage, duration ) {
			$("#foo2_timer").stop().width( 0 );
		}
	}
});

HTML:close x

<div class="list_carousel">
	<div id="foo2">
		<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>
	</div>
	<div class="clearfix"></div>
	<div class="timer" id="foo2_timer"></div>
</div>

CSS:close x

.list_carousel {
	padding: 15px 0 15px 40px;
}
.list_carousel div {
	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;
}
.timer {
	background-color: #9E1F63;
	width: 0;
	height: 10px;
}
.clearfix {
	float: none;
	clear: both;
}

Multiple-row carousel

A programmable multiple-row carousel is not supported, but a similar effect can be created using some smart workaround:

devide the items into two carousels
scroll both carousels simultaneously

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo3").after('<ul id="fooX" />').next().html($("#foo3").html());
$("#foo3 li:odd").remove();
$("#fooX li:even").remove();

$("#foo3").carouFredSel({
	synchronise	: "#fooX",
	scroll		: 5
});
$("#fooX").carouFredSel({
	auto		: false
});

HTML:close x

<div class="list_carousel">
	<ul id="foo3">
		<li> a </li>
		<li> b </li>
		<li> c </li>
		<li> d </li>
		<li> e </li>
		<li> f </li>
		<li> g </li>
		<li> h </li>
		<li> i </li>
		<li> j </li>
		<li> k </li>
		<li> l </li>
		<li> m </li>
		<li> n </li>
		<li> o </li>
		<li> p </li>
		<li> q </li>
		<li> r </li>
		<li> s </li>
		<li> t </li>
		<li> u </li>
		<li> v </li>
		<li> w </li>
		<li> x </li>
		<li> y </li>
		<li> z </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;
}

Not filling the Last page with items from the previous page.

In a non-circular carousel -if the amount of images is not an exact multiplecation of the number of visible items- the last page will be filled with the last items of the previous page. A workaround to prevent this behavior (and only show the items of the last page) could be to add the number of missing items with non-visible elements.

view JavaScript view HTML view CSS

JavaScript:close x

var numberOfItems	= $("#foo4").children().length;
var visibleItems	= 5;
var missingItems	= visibleItems - (numberOfItems % visibleItems);

for (var a = 0; a < missingItems; a++) {
	$("#foo4").append( "<span style='display: block; float: left; width: 174px; height: 174px;'></span>" );
}

$("#foo4").carouFredSel({
	circular: false,
	scroll	: {
		duration		: 0.5,
		pauseDuration	: 2000
	}
});

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

More examples

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

Download version 5.5.0

Thumbnail navigation

Infinity

Circular journey

jQuery

Carousel

Timer

Multiple-row carousel

Not filling the Last page with items from the previous page.

More examples