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/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
    
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://3.bp.blogspot.com/-XOog-dvB3Lw/UUXEkvRe7AI/AAAAAAAAAYs/JGR4KoTzL7s/s1600/Viper-muscle-cars-1151408_1024_768.jpg" alt="First slide">
            <div class="carousel-caption">
              <h1>Subtítulo Descriptivo</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-large btn-danger" href="#">Más Info...</a></p>
            </div>
        </div>
		
        <div class="item">
          <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/BMW-Car-Wallpapers-1.jpg" alt="Second slide">
            <div class="carousel-caption">
              <h1>Subtítulo Descriptivo</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-large btn-danger" href="#">Más Info...</a></p>
            </div>
        </div>
		
        <div class="item">
          <img src="http://www.automotive-encyclopedia.com/pics/bmw/image/2010-alpina-bmw-b7-bi-turbo-blue-car.jpg" alt="Third slide">
      ...

CSS

.carousel-caption {
    z-index: 0;
    display: none;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    padding-bottom: 30px;
    background: rgba(100, 100, 100, 0.5);
}

JavaScript

var carouselContainer = $('.carousel');
var slideInterval = 3000;

function toggleCaption() {
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.slideToggle();
}


carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid slide', toggleCaption).trigger('slid');