Carousel Bootstrap

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 text1 here</p>
		  </div>
		</div>
		<div class="item">
		  <div class="carousel-caption">
			<p>Caption text2 here</p>
		  </div>
		</div>
		<div class="item">
		  <div class="carousel-caption">
			<p>Caption text3 here</p>
		  </div>
		</div>
		<div class="item"> 
		  <div class="carousel-caption">
			<p>Caption text4 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>
	
	<script>
	  $(document).ready(function(){
		$('.carousel').carousel({
		  interval: 100;
      alert("hi");
		});
         $('.carousel').carousel(2);
	  });
	</script>

CSS

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

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

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