JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

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>
    </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.automotive-encyclopedia.com/pics/bmw/image/2010-alpina-bmw-b7-bi-turbo-blue-car.jpg" alt="Third 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> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a...

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() {
    $('.carousel-caption').hide();
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.delay(500).toggle("slide", {direction:'right'});
}


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