Bootstrap 活动分页类错误

Question

There is a strange thing with my pagination active class

I want to change active state on slide change, but the previous active position didn't change.

How to fix this??

HERE IS THE TEMPLATE

Thanks)

Code:

<div class="container">
  <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania.jpg">
      </div>
      <div class="item">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower.jpg">
      </div>
      <div class="item">
        <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania2.jpg">
      </div>
    </div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<!-- /Carousel -->
<!-- Navigation -->
<center>
  <div class="container">
    <nav>
      <ul class="pagination">
        <li class="active s1" data-target="#carousel" data-slide-to="0"><a>1<span class="sr-only">(current)</span></a></li>
        <li class="s2" data-target="#carousel" data-slide-to="1"><a>2<span class="sr-only">(current)</span></a></li>
        <li class="s2" data-target="#carousel" data-slide-to="2"><a>3<span class="sr-only">(current)</span></a></li>
      </ul>
    </nav>
  </div>
</center>

$(document).ready(function() {
  $('#carousel').on('slide.bs.carousel', function(e) {
    var idx = $(e.relatedTarget).index();
    $('[data-slide-to=' + idx + ']').button('toggle');
  });
});

Answer 1

Remove the 'active' class on every button of the pagination before toggle :

$(document).ready(function() {
  $('#carousel').on('slide.bs.carousel', function(e) {
    var idx = $(e.relatedTarget).index();        
    $('.pagination li').removeClass('active');
    $('[data-slide-to=' + idx + ']').button('toggle');    
  });
});

FIDDLE