bootstrap旋轉木馬指標不會改變點擊

Question

我有下面的代碼，我想修改。我已經從bootstrap旋轉木馬中分離出了這些指標。幻燈片工作正常，但當我點擊指標列表時，圖像會相應變化，但指標的指示不會改變。 我試圖修改它通過分配函數來點擊事件，但徒勞無功。 高級感謝您的幫助

CSS：

.carousel-inner > .item > img { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: auto; 
    margin-bottom: auto; 
    background-color:rgba(128,128,128,0.4); 
} 
#containerC { 
    display: table-cell; 
    vertical-align: middle ; 
    background-color: grey; 
    width: 270px; 
    height:270px; 
    padding: 10px; 
} 
.carousel-indicators li { 
    background-color: #999; 
    background-color: rgba(70,70,70,.25); 
} 
.carousel-indicators .active { 
    background-color: #444; 
} 

HTML：

<div id="containerC"> 
    <div id="carousel-example-generic" class="carousel" data-ride="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item product active"> 
     <img src="images/Test1.jpg" alt="..."> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    <div class="item product"> 
     <img src="images/Test2.jpg" alt="..."> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    <div class="item product"> 
     <img src="images/Test3.jpg" alt="..."> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
</div> 

<!-- Indicators --> 
<ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol> 

的Javascript：

$(document).ready(function(){ 
    console.log("hello world"); 
    $('#carousel-example-generic').on('slide.bs.carousel', function() { 
     $holder = $("ol li.active"); 
     $holder.next("li").addClass("active"); 
     if($holder.is(':last-child')) 
     { 
      $holder.removeClass("active"); 
      $("ol li:first").addClass("active"); 
     } 
     $holder.removeClass("active"); 
    }); 

    $('.carousel-indicators ol li').on("click",function(){ 
     $('.carousel-indicators ol li.active').removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

Answer 1

的選擇是錯誤的，應該是

$(document).ready(function(){ 
console.log("hello world"); 
$('#carousel-example-generic').on('slid.bs.carousel', function() { 
    $holder = $("ol li.active"); 
    $holder.removeClass('active'); 
    var idx = $('div.active').index('div.item'); 
    $('ol.carousel-indicators li[data-slide-to="'+ idx+'"]').addClass('active'); 
}); 

$('ol.carousel-indicators li').on("click",function(){ 
    $('ol.carousel-indicators li.active').removeClass("active"); 
    $(this).addClass("active"); 
}); 
}); 

http://fiddle.jshell.net/n26Qy/1/

Answer 2

http://jsfiddle.net/85DkP/

添加

.carousel-indicators li { 
    width:100px; 
    height:100px; 
    display:inline-block;}