Bootstrap Carousel-如何获得幻灯片上的数量

Question

I have the same query as the below post, but I couldn't get it to work.

Carousel - Twitter BootStrap ; Hiding the Previous or Next button .

1. Catch the slide/slid event to determine when the first image has finish, then add back the "previous" control?
2. Continue catching slide/slid event, incrementing a counter along the way. when your counter is equal to your list of images, you can remove the "next" control

Here is my jsfiidle

<div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="carousel-inner">
              <div class="active item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg">
              </div>
              <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"></div>
              <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"></div>
            </div>
            </div>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>

$(document).ready(function () {

    // -------- Initialise Carousel -------- //
   $('.carousel').each(function(){
        $(this).carousel({
            interval: false
        })
    });
});

Answer 1

I just made a quick example, basically it's listening to the slid event and every time the slide animation is done it will check which one the active slide is, based on that you can check whether it's the first or the last one.

http://jsfiddle.net/nRgVJ/5/