Bootstrap carousel pagination / slide numbering issue

问题

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.net/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.

回答1:

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.net/V4SBt/1/

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

回答2:

This one works for me :) http://jsfiddle.net/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>

来源：https://stackoverflow.com/questions/10974724/bootstrap-carousel-pagination-slide-numbering-issue

标签

javascript

jquery

css

twitter-bootstrap

carousel