Bootstrap Aktive Paginierung Klasse Fehler

Question

Es ist eine seltsame Sache mit meiner Paginierung aktiven Klasse

Ich mag aktiven Zustand auf Diatransport ändern, aber die bisherige aktive Position nicht ändern.

Wie behebt man das ??

HERE IS THE TEMPLATE

Dank)

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

Entfernen Sie die 'aktive' Klasse auf jeder Taste der Paginierung vor 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