If you click one of the bootstrap carousel indicators, and quickly click another indicator before the “sliding” animation is completed, the class=”active” is applied to the wrong li item. This bug occurs in chrome, ff, safari and likely all other browsers. Although this bug has been fixed in the newest release of bootstrap, here is a quick jQuery snippet to patch the bug on old releases.

Bootstrap’s carousel has functions which you can bind to, to indicate when the carousel starts sliding and when it finishes. I flagged this action with a boolean, and called stopPropagation against the click event until the boolean is false.

1
2
3
4
5
6
7
8
9
10
11

  var sliding = false;
  $('#carousel_home-carousel').bind('slide', function(e) {
    sliding = true;
    $('.carousel-indicators > li').on('click', function(e) {
      if (sliding) {
        e.stopPropagation();
      }
    });
  }).bind('slid', function(e) {
    sliding = false;
  });