I, like many others, want clickable and styleable pagination to run with the Bootstrap carousel so i don't have to run additional jquery plugins (eg. innerfade) over the top of bootstrap.

I've had a shot using this question (and answer) Bootstrap Carousel Number active icon but so far no dice, I can't see what i'm doing wrong here.

Here's my fiddling / (strangely the pagination works in the fiddle and not locally). As you can see, numbering doesn't skip through as the slides progress.

Please excuse my woeful js skills.

I, like many others, want clickable and styleable pagination to run with the Bootstrap carousel so i don't have to run additional jquery plugins (eg. innerfade) over the top of bootstrap.

I've had a shot using this question (and answer) Bootstrap Carousel Number active icon but so far no dice, I can't see what i'm doing wrong here.

Here's my fiddling http://jsfiddle/adriatiq/V4SBt/ (strangely the pagination works in the fiddle and not locally). As you can see, numbering doesn't skip through as the slides progress.

Please excuse my woeful js skills.

• javascript
• jquery
• css
• twitter-bootstrap
• carousel

2 Answers 2

This one works for me :) http://jsfiddle/4WY6S/6/

<script type="text/javascript">
 var currentPage =0;
 $('#myCarousel').carousel({
         interval: 7000
     })
 $('#carousel-nav a').click(function(q){
    q.preventDefault();
    clickedPage = $(this).attr('data-to')-1;
    currentPage = clickedPage-1;
    $('#myCarousel').carousel(clickedPage);
    });
var pages = $("#carousel-nav a");
var pagesCount = pages.length;
$('#myCarousel').on('slide', function(evt) {
  $(pages).removeClass("active");
  currentPage++;
  currentPage=(currentPage%pagesCount);
  $(pages[currentPage]).addClass("active");
  });
</script>

Here is the code for the "Prev" and "Next" buttons:

<a href="#" onclick="if(currentPage>0){currentPage=((currentPage-2)%3);$('#myCarousel').carousel(currentPage+1);}">PREVIOUS</a> | <a href="#" onclick="if(currentPage<2){$('#myCarousel').carousel(currentPage+1);}">NEXT</a>

I've looked into your code. I've added the class based on clicking on the 1,2,3 numbers... But I was unable to do the same for next prev links...

http://jsfiddle/V4SBt/1/

I've written the code but its mented... In that code I've getting strange error saying Undefined click event on those link when I tried to listen to those click event.