cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <div id="myCarousel" class="carousel container slide">
	<div class="carousel-inner">
		<div class="active item one"></div>
		<div class="item two"></div>
		<div class="item three"></div>
<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-12">
			<div class="well">
				<h2>Lorizzle ipsum dolizzle sheezy</h2>
				<p>Lorizzle ipsum dolizzle sheezy shut the shizzle up, yo adipiscing yippiyo. Nullizzle sapien yo, pot fo shizzle mah nizzle fo rizzle, mah home g-dizzle, yo break yo neck, yall, gravida vizzle, i'm in the shizzle. Break yo neck, yall dang tortizzle.
					Sed erizzle. Mofo things dolizzle tellivizzle mah nizzle tempizzle tempizzle. Maurizzle pellentesque nibh et yippiyo. Sure in tortor. Pellentesque eleifend rhoncizzle nisi. Cool hac fo shizzle platea i'm in the shizzle. Go to hizzle pizzle. Shizzle
					my nizzle crocodizzle shizznit urna, pretizzle fo shizzle, mattizzle yippiyo, yippiyo vitae, nunc. For sure suscipizzle. Integer rizzle that's the shizzle sizzle purus. Curabitizzle et dizzle ass nisi i'm in the shizzle mollizzle. Crackalackin potenti.
					Izzle odio. Vivamus neque. Cras you son of a bizzle. Phat maurizzle fo shizzle my nizzle, interdizzle a, feugiat sit amizzle, shizzlin dizzle izzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Mah nizzle gravida. Vestibulizzle pimpin' mi,
					funky fresh in, you son of a bizzle sizzle, rizzle sempizzle, check it out. Ass izzle ipsizzle. Shizznit volutpizzle bling bling vel orci. Crizzle quizzle shizzlin dizzle fo shizzle purizzle sodalizzle ornare. Pot venenatis shit et rizzle. Nunc ma
					nizzle. I saw beyonces tizzles and my pizzle went crizzle the bizzle placerat fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Curabitizzle stuff fizzle. Nunc stuff, leo eu fo shizzle my nizzle hendrerit, fo shizzle mah nizzle fo rizzle, mah home
					g-dizzle felis elementum sizzle, shut the shizzle up aliquet magna shut the shizzle up luctus pede. Crackalackin a mah nizzle. Class aptent taciti yo izzle things fo we gonna chung conubia nostra, pizzle inceptos hymenizzle. Aliquizzle interdizzle,
					neque nizzle crunk own yo', i saw beyonces tizzles and my pizzle went crizzle orci break yo neck, yall leo, in get down get down dang arcu yo mamma check out this.</p>
<!-- /container -->
              .well {
	margin-top: 50px;
	opacity: 0.75;

.carousel {
	z-index: -99;

/* keeps this behind all content */

.carousel .item {
	position: fixed;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;

.carousel .one {
	background: url(http://www.sxc.hu/pic/l/t/th/threeoak/1426015_79844748.jpg);
	background-size: cover;
	-moz-background-size: cover;

.carousel .two {
	background: url(http://www.sxc.hu/pic/l/a/aj/ajosue79/1409040_49165569.jpg);
	background-size: cover;
	-moz-background-size: cover;

.carousel .three {
	background: url(http://www.sxc.hu/pic/l/a/ar/archbob/1408089_95453152.jpg);
	background-size: cover;
	-moz-background-size: cover;

.carousel .active.left {
	left: 0;
	opacity: 0;
	z-index: 2;
Loading ..................