如何更改自定义轮播指示器的背景颜色?

10
我想在图像激活时更改 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>
1个回答

45

想要不使用Javascript实现这个功能,最简单的方法是修改您的标记以使用标准类。然后,您可以使用自动添加到.carousel-indicators元素的直接子元素上的活动类。

不使用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');
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接