JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft_gray.png" />
        </div>
        <div class="item">
            <img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
        </div>
    </div>
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

CSS

.carousel .item img {
    width: auto;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}

.carousel {
    margin: 10px;
}

JavaScript

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

$('#myCarousel').on('slid', function () {
    alert("Slide Event");
    //console.log('slid event');
});