Bootstrap carousel. Add pagination dots to bottom

Question

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 hand.

Here is my code:

http://jsfiddle.net/mdesignone/qXgCg/

Thanks:)

Answer 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

Answer 2

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

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

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