Bootstrap 3 Carousel Indicators

This fiddel adds indicator on the carousel we have created by providing a navigation point.

by Tapan kumar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="row ">
    <div class="col-md-8 col-md-offset-2">
        <div class="carousel slide" id="theCarousel"                data-interval="3000">
            
            <ol class="carousel-indicators">
                <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#theCarousel" data-slide-to="1"></li>
                <li data-target="#theCarousel" data-slide-to="2"></li>
            </ol>
            
            <div class="row">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive"/>
                    </div>
                    <div class="item ">
                        <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive"/>
                    </div>
                    <div class="item ">
                        <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

(function(){
    $("#theCarousel").carousel();
})();