javascript - Bootstrap Active Pagination Class Error -

there strange thing pagination active class

i want change active state on slide change, previous active position didn't change.

how fix this??

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

remove 'active' class on every button of 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