JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="http://placehold.it/1200x400/dddddd/333333">
        </div><!-- End Item -->
        
        <div class="item">
          <img src="http://placehold.it/1200x600/999999/cccccc">
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->


		<ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">panel-1</a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">panel-2</a></li>
        </ul>


    </div><!-- End Carousel -->
</div>

CSS

#myCarousel .nav a small {
	display:block;
}
#myCarousel .nav {
	background:#eee;
}
#myCarousel .nav a {
	border-radius: 0px;
}

.item{
    transition: all 2s;
}

JavaScript

var clickEvent = false;
        $('#myCarousel).on('click', '.nav a', function() {
                        clickEvent = true;
                        $(this).closest('.nav').find('li').removeClass('active');
                        $(this).parent().addClass('active');        
        }).on('slid.bs.carousel', function(e) {
                if(!clickEvent) {
                        var count = $('.nav').children().length -1;
                        var current = $('.nav li.active');
                        current.removeClass('active').next().addClass('active');
                        var id = parseInt(current.data('slide-to'));
                        if(count == id) {
                                $('.nav li').first().addClass('active');    
                        }
                }
                clickEvent = false;
        });