<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hide-bullets {list-style:none;margin:0px;padding:0;}
.thumbnail {list-style:none;margin:1px;padding:0px;}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {list-style:none;width:auto;}
</style>
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({interval: 3000});
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);}});
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());});});
</script>
<div class="container">
<div id="main_area">
<div class="row">
<div class="col-sm-6" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-0"><img src="http://i.imgur.com/fiVofHIt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-1"><img src="http://i.imgur.com/rcivwQJt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-2"><img src="http://i.imgur.com/0nyxX2Lt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-3"><img src="http://i.imgur.com/gptb8xnt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-4"><img src="http://i.imgur.com/oSC4D7Rt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-5"><img src="http://i.imgur.com/9GqSG9at.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-6"><img src="http://i.imgur.com/7X4wjWSt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-7"><img src="http://i.imgur.com/kbCkBYet.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-8"><img src="http://i.imgur.com/XZLp5MAt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-9"><img src="http://i.imgur.com/uFoNudkt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-10"><img src="http://i.imgur.com/DgCJJQet.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-11"><img src="http://i.imgur.com/1Yul3Hvt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-12"><img src="http://i.imgur.com/Nq06hwXt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-13"><img src="http://i.imgur.com/0pOnQXwt.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-14"><img src="http://i.imgur.com/W8LjNt5t.jpg"></a></li>
<li class="col-sm-3"><a class="thumbnail" id="carousel-selector-15"><img src="http://i.imgur.com/zamfiLBt.jpg"></a></li>
</ul></div>
<div class="col-sm-6"><div class="col-xs-12" id="slider"><div class="row">
<div class="col-sm-12" id="carousel-bounding-box"><div class="carousel slide" id="myCarousel"><div class="carousel-inner">
<div class="active item" data-slide-number="0"><img src="http://i.imgur.com/fiVofHIl.jpg"></div>
<div class="item" data-slide-number="1"><img src="http://i.imgur.com/rcivwQJl.jpg"></div>
<div class="item" data-slide-number="2"><img src="http://i.imgur.com/0nyxX2Ll.jpg"></div>
<div class="item" data-slide-number="3"><img src="http://i.imgur.com/gptb8xnl.jpg"></div>
<div class="item" data-slide-number="4"><img src="http://i.imgur.com/oSC4D7Rl.jpg"></div>
<div class="item" data-slide-number="5"><img src="http://i.imgur.com/9GqSG9al.jpg"></div>
<div class="item" data-slide-number="6"><img src="http://i.imgur.com/7X4wjWSl.jpg"></div>
<div class="item" data-slide-number="7"><img src="http://i.imgur.com/kbCkBYel.jpg"></div>
<div class="item" data-slide-number="8"><img src="http://i.imgur.com/XZLp5MAl.jpg"></div>
<div class="item" data-slide-number="9"><img src="http://i.imgur.com/uFoNudkl.jpg"></div>
<div class="item" data-slide-number="10"><img src="http://i.imgur.com/DgCJJQel.jpg"></div>
<div class="item" data-slide-number="11"><img src="http://i.imgur.com/1Yul3Hvl.jpg"></div>
<div class="item" data-slide-number="12"><img src="http://i.imgur.com/Nq06hwXl.jpg"></div>
<div class="item" data-slide-number="13"><img src="http://i.imgur.com/0pOnQXwl.jpg"></div>
<div class="item" data-slide-number="14"><img src="http://i.imgur.com/W8LjNt5l.jpg"></div>
<div class="item" data-slide-number="15"><img src="http://i.imgur.com/zamfiLBl.jpg"></div></div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div></div></div></div></div></div></div></div>
