CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
dragonfly
dragonfly

Reputation: 3227

Bootstrap Carousel - How to get the count on slides

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
        })
    });
});

Upvotes: 1

Views: 4365

Answers (1)

woutr_be
woutr_be

Reputation: 9722

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/

Upvotes: 1

Related Questions