Bootstrap Carousel. Add Pagination Dots To Bottom

How would it be possible to add pagination as in dots to the existing carousel for bootstrap. It needs to move automatically through the dots. Very new to this and need a little ha

Solution 1:

This feature is currently slated to be included in the 2.3 milestone (currently at 2.1). There is presently a pull request which already implements this functionality, and I would recommend using it rather than rolling your own, as it is more likely to be consistent with the final API once the feature gets integrated officially.

The source for the plugin can be found in mikaelbr's fork of the Bootstrap project. You will require both the bootstrap-carousel.js and the carousel.less.

Here is a demo:

JSFiddle

Solution 2:

With latest carousel, you can use carousel-indicators class:

<olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol>

http://getbootstrap.com/javascript/#carousel

Solution 3:

Here's a somewhat hacky way of doing it, as I had to do this as well for my site. Updated Fiddle: http://jsfiddle.net/qXgCg/2/

//Javascript   var slider = $(".carousel-inner") 
.carousel({ interval: 5000 }) 
.bind('slid', function() { 
var index = $(this).find(".active").index(); 
$(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active'); 
}); 

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

/* css */
.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; }

<!--html --->
<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>