ブートストラップアクティブページネーションクラスの誤り

Question

私はスライドの変化でアクティブな状態を変更したいのですが、前のアクティブ位置は変更されませんでした。

これを修正するには？

HERE IS THE TEMPLATE

おかげで）

コード：

<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

が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