Bootstrap Carousel w/ Nav

Twitter Bootstrap Carousel with pagination style nav.

by pcarguy

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="http://placehold.it/300x200/888&text=Item 1" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/aaa&text=Item 2" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Item 3" />
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

JavaScript

// invoke the carousel
$('#myCarousel').carousel({
  interval: false
});

var url = document.location.toString();
  if (url.match('#')) {
    // Clear active item
    $('.carousel-inner div').removeClass('active');

    // Activate item number #hash
    var index = url.split('#')[1];
    $('.carousel-inner div:nth-child(' + index + ')').addClass('active');
  }

  $('#myCarousel').bind('slid', function (e) {
    // Update location based on slide (index is 0-based)
    var item = $('#myCarousel .carousel-inner .item.active');
    window.location.hash = "#"+parseInt(item.index()+1);
  })
  
  $(window).bind( 'hashchange', function(e) {
  var item = $('#myCarousel .carousel-inner .item.active');
    window.location.hash = "#"+parseInt(item.index()+1);
      })