CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user1631763
user1631763

Reputation: 245

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

Here is my code:

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

Thanks:)

Upvotes: 12

Views: 33423

Answers (3)

Kien Pham
Kien Pham

Reputation: 2779

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

Upvotes: 6

merv
merv

Reputation: 76700

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

Upvotes: 10

Sean Thompson
Sean Thompson

Reputation: 902

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>

Upvotes: 2

Related Questions