javascript - Bootstrap carousel paginationslide numbering issue - Stack Overflow

admin管理员组

文章数量:1342504

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

Share Improve this question Follow edited May 23, 2017 at 10:34 CommunityBot 111 silver badge asked Jun 11, 2012 at 5:09 adriatiqadriatiq 32611 gold badge33 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

本文标签： javascriptBootstrap carousel paginationslide numbering issueStack Overflow