Question

我有以下代码我想修改。我将指标与引导转盘分开了。幻灯片工作正常，但是当我点击指示符列表时，图像会相应改变，但指示符的指示不会改变。我尝试通过将函数分配给单击事件来修改它，但是徒劳无功。高级感谢您的帮助

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

bootstrap carousel指标在点击时没有变化

2 个答案: