jQuery & Bootstrap Based Carousel with Thumbnails Navigation

Uses jQuery, Html, and CSS to add a thumbnail navigation to your Bootstrap carousel component so the visitor is able to cycle through the carousel elements by hovering over the thumbnails.

How to use it:

1. Include jQuery library and Bootstrap framework in your document.

<script src="jquery-1.11.3.min.js"></script>

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

2. Create the main slider carousel with an arrow navigation.

<div class="row">
  <div class="col-md-12" id="slider">
    <div class="col-md-12" id="carousel-bounding-box">
      <div id="myCarousel" class="carousel slide"> 
        <!-- main slider carousel items -->
        <div class="carousel-inner">
          <div class="active item" data-slide-number="1">
            <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"> 
          </div>
          <div class="item" data-slide-number="2"> 
            <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"> 
          </div>
          <div class="item" data-slide-number="3"> 
            <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"> 
          </div>
          <div class="item" data-slide-number="4"> 
            <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"> 
          </div>
        </div>
        <!-- main slider carousel nav controls --> 
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
      </div>
    </div>
  </div>
</div>

3. Create the thumbnail navigation.

<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"> 
  <!-- thumb navigation carousel items -->
  <ul class="list-inline">
    <li> <a id="carousel-selector-1" class="selected">
      <div class="slider-navigation"> Some text<br>
        Some text here </div>
      </a></li>
    <li> <a id="carousel-selector-2">
      <div class="slider-navigation"> Some text<br>
        Some text here </div>
      </a></li>
    <li> <a id="carousel-selector-3">
      <div class="slider-navigation"> Some text<br>
        Some text here </div>
      </a></li>
    <li> <a id="carousel-selector-4">
      <div class="slider-navigation"> Some text<br>
        Some text here </div>
      </a></li>
  </ul>
</div>

4. The additional CSS for the Bootstrap carousel.

.slider-navigation {
  background: aquamarine;
  padding: 30px 15px;
  text-align: center;
}

#slider-thumbs { margin-top: -100px; }

#slider-thumbs .list-inline li {
  width: 25%;
  padding: 0px;
  margin-right: -4px;
  cursor: pointer;
}

#slider-thumbs .list-inline li:first-child { padding-left: 5px; }

.slider-nav-arrow {
  text-align: center;
  margin-bottom: 0px;
  visibility: hidden;
}

.selected .slider-nav-arrow { visibility: visible; }

.selected .slider-navigation { opacity: 0.5; }

5. A little JavaScript to enable the thumbnail navigation.

$('#myCarousel').carousel({
  interval: 3000
});

// handles the carousel thumbnails
$('[id^=carousel-selector-]').hover(function() {
  var id_selector = $(this).attr("id");
  //console.log(id_selector);
  var id = id_selector.substr(id_selector.length - 1);
  //console.log(id);
  id = parseInt(id);
  $('#myCarousel').carousel(id - 1);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
  //console.log(this);
});

// when the carousel slides, auto update
$('#myCarousel').on('slid.bs.carousel', function(e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-' + id + ']').addClass('selected');
});

---

This awesome jQuery plugin is developed by ashishtayade. For more Advanced Usages, please check the demo page or visit the official website.