JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<h1>Bootstrap 3 Thumbnail Slider / Carousel</h1>

  
  	<!-- thumb navigation carousel -->
    <div class="col-md-12 " id="slider-thumbs">
        
            <!-- thumb navigation carousel items -->
          <div id="carousel-selector-0" class="selected ss">
            <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
          </div>
          <div id="carousel-selector-1"  class=" ss">
            <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
          </div>
          <div id="carousel-selector-2"  class="ss">
            <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
          </div>
        <div id="carousel-selector-3"  class="ss">
            <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
          </div>
        
    </div>
  
  
    <!-- main slider carousel -->
    <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="0">
                                <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="1">
                              <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                               ...

CSS

.selected  {
	opacity:0.5;
  display:block!important;
}
.ss{
  display:none;
}

JavaScript

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



// when the carousel slides, auto update
$('#myCarousel').on('slide.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');
});