twitter-bootstrap 引导轮播指示器在点击时不会改变

bootstrap carousel indicators not changing on click

提问by muru

I have the code below that I wish to modify. I have separated the indicators from the bootstrap carousel. The slide is working fine but when I click on the list of indicators the image changes correspondingly but the indicator's indication is not changing. I tried to modify it by assign the function to on click event but in vain. Advanced thanks for help

我有下面要修改的代码。我已经将指标与引导轮播分开了。幻灯片工作正常，但是当我单击指标列表时，图像会相应地发生变化，但指标的指示没有变化。我试图通过将功能分配给点击事件来修改它，但徒劳无功。高级感谢帮助

CSS:

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:

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:

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");
    });
});

回答by iwcoder

the selector is wrong, should be

选择器错了，应该是

$(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/

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

回答by Pawe?

http://jsfiddle.net/85DkP/

http://jsfiddle.net/85DkP/

Add

添加

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