JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Mobile-Friendly-Bootstrap-Tabs-Enhancement-with-jQuery/dist/css/bootstrap-responsive-tabs.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Mobile-Friendly-Bootstrap-Tabs-Enhancement-with-jQuery/dist/js/jquery.bootstrap-responsive-tabs.min.js"></script>
	<div class="container">
			<div class="row" style="margin-bottom:20px">
				<div class="col-md-12" id="slider">
					<div id="myCarousel" class="carousel slide">
						<div class="carousel-inner">
							<div class="active item" data-slide-number="0">
								<div class="center-block">
									<span>
										<img src="http://placehold.it/1200x480&amp;text=Zero" class="img-responsive">
									</span>
								</div>
							</div>
							<div class="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&amp;text=two" 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 class="item" data-slide-number="5">
								<img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
							</div>
							<div class="item" data-slide-number="6">
								<img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
							</div>
							<div class="item" data-slide-number="7">
								<img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
							</div>
							<div...

CSS

.selected img {
	opacity:0.5;
}
.item{
height:250px;
padding: 10px;
background: #CDDC39;
  width:300px;
}
.boxtitle{
  padding:10px;
  border:0;
  margin:10px 0 5px;
  font-size:17px;
  background:#ddd;
  width: 100%;
  min-height: 40px;
}

/* .carousel-inner {
    height: 700px;
    overflow: scroll;
  }*/

JavaScript

$('#myCarousel').carousel({
			  pause: true,
			  interval: false
			});

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

			$('#myCarousel').bind('slide.bs.carousel', function (e) {
			  var slideFrom = $(this).find('.active').index();
			  var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive');
			  videoContent.html( videoContent.html() );
			});

			// 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');
			});