如何更改定制的旋转木马指示灯背景颜色？

Question

我希望在活动时更改img-circle背景色。

<div id="myCarousel" class="carousel slide">
      <div class="carousel-buttons">
        <div class="col-sm-4 text-center">
          <a class="text-center " data-target="#myCarousel" data-slide-to="0" href="#">
            <div class="img-circle center-block">
              <img class="carousel-icons-img" src="image/icon-1-student.svg" >
            </div>
          </a>
        </div>

Answer 1

最简单的方法没有 Javascript可能是修改标记以使用标准类。然后，您可以使用自动附加到.carousel-indicators类的元素的直接子元素的活动类。

DEMO without Javascript

在演示中，我重写标准的Bootstrap CSS并利用bootstrap.js通过一些自定义css附加到.carousel-indicators子元素的活动类：

.carousel-indicators li {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #0000ff;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);    
}
.carousel-indicators .active {
    width: 48px;
    height: 48px;
    margin: 10px;
    background-color: #ffff99;
}

如果您可以将内容重新编写到标准类中，则可以始终覆盖css或使用LESS自定义它。您没有发布自定义CSS或指示您是否使用Bootstrap 2或3版本，所以我无法提供更多关于点示例。演示中的标记使用版本3.2.0。

您也可以通过轮播事件使用Javascript 执行此操作。同样，这个例子基于Bootstrap 3.2.0。它不适用于版本2，因为事件名称已更改。

DEMO using Javascript

在此示例中，您将侦听slid.bs.carousel事件。一旦旋转木马即将滑动，它就会触发，因此要获得下一个活动幻灯片，您必须使用event.relatedTarget。然后，要查找相应的指标，您可以使用下一个活动幻灯片的索引来获取带有data-slide-to属性中匹配值的轮播指示符。

//Make sure to change the id to your carousel id
$('#carousel-example-generic').on('slid.bs.carousel', function (event) {
    var nextactiveslide = $(event.relatedTarget).index();
    var $btns = $('.carousel-buttons');
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
    $btns.find('.img-circle').removeClass('active');
    $active.find('.img-circle').addClass('active');
});