Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>
	
	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<div class="item active">
		  <img src="http://lorempixel.com/output/animals-q-c-640-480-4.jpg" alt="...">
		  <div class="carousel-caption">
		    Caption 1
		  </div>
		</div>
		<div class="item">
		  <img src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" alt="...">
		  <div class="carousel-caption">
		    Caption 2
		  </div>
		</div>
		<div class="item">
		  <img src="http://lorempixel.com/output/animals-q-c-640-480-10.jpg" alt="...">
		  <div class="carousel-caption">
		    Caption 3
		  </div>
		</div>
	</div>
	
	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>
<div id="carousel-index" style="text-align: center;">1 of 3</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

// This triggers after each slide change
$('.carousel').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;
    
  // Now display this wherever you want
  var text = (currentIndex + 1) + " of " + total;
  $('#carousel-index').text(text);
});