<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="carousel slide" id="casualCarousel" data-interval="false"> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <img src="http://placehold.it/400x250"> </div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/200x100"> </div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/400x400"> </div> </div> </div> </div> <div class="row"> <ul class="hide-bullets text-center"> <li> <a class="thumbnail" data-slide-number="0"> <img src="http://placehold.it/100x200"> </a> </li> <li> <a class="thumbnail" data-slide-number="1"> <img src="http://placehold.it/200x100"> </a> </li> <li> <a class="thumbnail" data-slide-number="2"> <img src="http://placehold.it/200x200"> </a> </li> </ul> </div> </div>

.hide-bullets { list-style: none; margin-top: 10px; padding: 0; } .item { cursor: pointer; } ul.hide-bullets > li { display: inline-block; } .thumbnail img { cursor: pointer; width: 100px; height: 100px; } .carousel-inner{ height: 200px; }

$(function() { $('[data-slide-number]').click(function() { var id = parseInt($(this).attr("data-slide-number")); $('#casualCarousel').carousel(id); }); });