JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">


    <!-- Macbook carousel -->
    <div id="carousel" class="carousel slide macbook" rel="carousel">
        <img src="img/carousel-macbook.png" class="carousel-macbook" alt="" />
        <!-- Carousel items -->
        <div class="carousel-inner">
            <!-- Item -->
            <div class="item active">
                <img alt="" src="http://placehold.it/940x480/5DB9F2/fff" />
            </div>
            <!-- end Item -->
            <!-- Item -->
            <div class="item">
                <img alt="" src="http://placehold.it/940x480/803080/fff" />
            </div>
            <!-- end Item -->
            <!-- Item -->
            <div class="item">
                <img alt="" src="http://placehold.it/940x480/E48285/fff" />
            </div>
            <!-- end Item -->
        </div>

        <!-- Carousel navigation -->
        <a class="carousel-control left" href="#carousel" data-slide="prev"></a>
        <a class="carousel-control right" href="#carousel" data-slide="next"></a>
    </div>
    <!-- end Macbook carousel -->
    
    <!-- Carousel nav -->
                  <div class="slider-pager">
                  <a href="#main-slider" class="pager-active">0</a>
                  <a href="#main-slider">1</a>
                  <a href="#main-slider">2</a>
                </div>

</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.carousel {
    width: 400px;
}
.slider-pager        {    margin-top: 10px; }
    .slider-pager a    {    display: block; height: 10px; width: 10px; float: left; margin-right: 10px; border-radius: 50%; background: #41af96; font-size: 1px; color: #fff; text-indent: -9999px; }
    .slider-pager a.pager-active { background: #2c8571; }

JavaScript

$(document).ready(function() {
 

    $(".slider-pager a").click(function(e){ 
      var index = $(this).index(); 
      slider.carousel(index); 
      e.preventDefault(); 
    }); 
});