JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="first" class="carousel slide carousel-sync">
  <p>Section 1</p>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/300x200/1abc9c/fff">
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200/2ecc71/fff">
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200/3498db/fff">
    </div>
  </div>

  <a class="left carousel-control" href="#first" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#first" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

<div id="second" class="carousel slide carousel-sync">
  <p>Section 2</p>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/300x200/1abc9c/fff">
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200/2ecc71/fff">
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200/3498db/fff">
    </div>
  </div>

  <a class="left carousel-control" href="#second" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#second" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>


<div id="third" class="carousel slide">
  <p>Section 3</p>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/300x200/1abc9c/fff">
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200/2ecc71/fff">
    </div>
  </div>

  <a class="left carousel-control" href="#third" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control"...

CSS

.carousel {
    width: 300px;
    height: 200px;    
    float: left;
    margin: 20px;
}

JavaScript

$('.carousel-sync').on('slide.bs.carousel', function(ev) {
  	var dir = ev.direction == 'right' ? 'prev' : 'next';
	$('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
});
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
	$('.carousel-sync').removeClass('sliding');
});