<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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h1>Thumbnail Slider / Carousel</h1>
  <div id="myCarousel" class="carousel slide" data-interval="false">

  <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://dummyimage.com/420x440/000/ffffff&text=IMG+1" alt="XZ" style="width: 420px; height: 440px">
      </div>
	  <div class="item">
        <img src="https://dummyimage.com/420x440/000/ffffff&text=IMG+2" alt="XZ" style="width: 420px; height: 440px">
      </div>
	  <div class="item">
        <img src="https://dummyimage.com/420x440/000/ffffff&text=IMG+3" alt="XZ" style="width: 420px; height: 440px">
      </div>
	  <div class="item">
        <img src="https://dummyimage.com/420x440/000/ffffff&text=IMG+4" alt="XZ" style="width: 420px; height: 440px">
      </div>
	  <div class="item">
        <img src="https://dummyimage.com/420x440/000/ffffff&text=IMG+5" alt="XZ" style="width: 420px; height: 440px">
      </div>
	  
	  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		  <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		  <span class="sr-only">Next</span>
      </a>
    </div>
	
	<div id="thumbCarousel">
      <div data-target="#myCarousel" data-slide-to="0" class="thumb active"><img src="https://dummyimage.com/120x130/000/ffffff&text=IMG+1" alt="XZ" style="width: 120px; height: 130px"></div>
      <div data-target="#myCarousel" data-slide-to="1" class="thumb"><img src="https://dummyimage.com/120x130/000/ffffff&text=IMG+2" alt="XZ" style="width: 120px; height: 130px"></div>
      <div data-target="#myCarousel" data-slide-to="2" class="thumb"><img src="https://dummyimage.com/120x130/000/ffffff&text=IMG+3" alt="XZ" style="width: 120px; height: 130px"></div>
      <div data-target="#myCarousel" data-slide-to="3" class="thumb"><img src="https://dummyimage.com/120x130/000/ffffff&text=IMG+4" alt="XZ" style="width: 120px; height: 130px"></div>
      <div data-target="#myCarousel" data-slide-to="4" class="thumb"><img src="https://dummyimage.com/120x130/000/ffffff&text=IMG+5" alt="XZ" style="width: 120px; height: 130px"></div>           
    </div>
  
  </div>
</div>

.container{
	background: #eaeaea;
	text-align: center;
}

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      margin: auto;
  }
  
#myCarousel{
	max-width: 650px;
	margin: 0 auto;
	background: #fff;
}

#thumbCarousel{
	max-width: 650px;
	margin: 0 auto;
	overflow: hidden;
	background: #eaeaea;
	padding: 10px 0;
}

#thumbCarousel .thumb{
	float: left;
	margin-right: 10px;
	border: 1px solid #ccc;
	background: #fff;
}

#thumbCarousel .thumb:last-child{
	margin-right: 0;
}

.thumb:hover{
	cursor: pointer;
}

.thumb img{
	opacity: 0.5;
}

.thumb img:hover{
	opacity: 1;
}

.thumb.active img{
	opacity: 1;
  border: 1px solid #1d62b7;
}

$(document).ready(function(){
	 
		//Show carousel-control
		
		$("#myCarousel").mouseover(function(){
			$("#myCarousel .carousel-control").show();
		});

		$("#myCarousel").mouseleave(function(){
			$("#myCarousel .carousel-control").hide();
		});
		
		//Active thumbnail
		
		$("#thumbCarousel .thumb").on("click", function(){
			$(this).addClass("active");
			$(this).siblings().removeClass("active");
		
		});
		
		//When the carousel slides, auto update
		
		$('#myCarousel').on('slid.bs.carousel', function(){
		   var index = $('.carousel-inner .item.active').index();
		   //console.log(index);
		   var thumbnailActive = $('#thumbCarousel .thumb[data-slide-to="'+index+'"]');
		   thumbnailActive.addClass('active');
		   $(thumbnailActive).siblings().removeClass("active");
		   //console.log($(thumbnailActive).siblings()); 
		});
	 });