Wie kann ich den Status der Optionsschaltflächen aktualisieren, damit sie dem Karussellstatus entsprechen?

Question

Ich verwende Radioknöpfe wie eine Seitennummerierung für mein Karussell, was gut funktioniert. Wenn ich die Folie mithilfe der Karusselltasten anstelle der Optionsfelder ändere, ändert sich der Status der Optionsfelder nicht, sodass die ausgewählte Schaltfläche nicht mit der ausgewählten Folie übereinstimmt. Wie kann ich das beheben?

Here is my template

HTML:

<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_chania2.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_flower2.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> 
    <br> 
    <center> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary active s1"><input type="radio" name="options" autocomplete="off" checked>1</label> 
     <label class="btn btn-primary s2"><input type="radio" name="options" autocomplete="off">2</label> 
     <label class="btn btn-primary s3"><input type="radio" name="options" autocomplete="off">3</label> 
     <label class="btn btn-primary s4"><input type="radio" name="options" autocomplete="off">4</label> 
    </div> 
    </center> 

JS:

$(function() { 
    $(".s1").click(function() {$("#carousel").carousel(0);}); 
    $(".s2").click(function() {$("#carousel").carousel(1);}); 
    $(".s3").click(function() {$("#carousel").carousel(2);}); 
    $(".s4").click(function() {$("#carousel").carousel(3);}); 
}); 

Answer 1

Wenn Sie es behalten wollen, wie es ist, können Sie hinzufügen

$('#carousel').on('slide.bs.carousel', function (e) { 
    var idx = $(e.relatedTarget).index() + 1; 
    $('.s'+idx).button('toggle'); 
}); 

aber

$(function() { 
    $(".s1").click(function() {$("#carousel").carousel(0);}); 
    $(".s2").click(function() {$("#carousel").carousel(1);}); 
    $(".s3").click(function() {$("#carousel").carousel(2);}); 
    $(".s4").click(function() {$("#carousel").carousel(3);}); 
}); 

ist nicht so eine gute Idee. Ich würde vorschlagen, sie zu ändern und es this machen wie

Answer 2

ich dieses Problem gelöst haben)

Hier ist eine feste JS:

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

Here is the working Template