Basic carousel examples

JavaScript:close x

$("#foo1").carouFredSel();

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({
	width	: 870,
	items	: 8,
	scroll	: 4
});

HTML:close x

<div class="list_carousel">
	<ul 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>
	</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

$("#foo3").carouFredSel({
	items 		: 1,
	direction	: "up",
	auto : {
		easing		: "elastic",
		duration	: 1000,
		timeoutDuration: 2000,
		pauseOnHover: true
	}
}).find(".slide").hover(
	function() { $(this).find("div").slideDown(); },
	function() { $(this).find("div").slideUp();	}
);

HTML:close x

<div class="html_carousel">
	<div id="foo3">
		<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>

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