Carousel with content other than imaes

by jdcast

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	

		<!--  Carousel - consult the Twitter Bootstrap docs at 
		  http://twitter.github.com/bootstrap/javascript.html#carousel -->
	<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
	  <div class="carousel-inner">
		<div class="item active"><!-- class of active since it's the first item -->
		  <div class="carousel-caption">
			<p>Caption text here</p>
		  </div>
		</div>
		<div class="item">
		  <div class="carousel-caption">
			<p>Caption text here</p>
		  </div>
		</div>
		<div class="item"><img src="http://placehold.it/1200x480" alt="" />
		  <div class="carousel-caption">
			<p>Caption text here</p>
		  </div>
		</div>
		<div class="item"> <img src="http://placehold.it/1200x480" alt="" />
		  <div class="carousel-caption">
			<p>Caption text here</p>
		  </div>
		</div>
	  </div><!-- /.carousel-inner -->
	  <!--  Next and Previous controls below
			href values must reference the id for this carousel -->
		<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
	</div><!-- /.carousel -->
	
	<script src="js/jquery.min.js"></script>	
	<script src="js/bootstrap.min.js"></script>

CSS

body {
      	padding - top : 60px;
      	padding - bottom : 40px;
      }

.item{
    background-color:#ccc;
    display:block;
}

.carousel-caption{
    color:#000;
    position:static;
}

JavaScript

$(document).ready(function(){
		$('.carousel').carousel({
		  interval: 2000
		});
	  });