我想在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>
在没有Javascript的情况下，最简单的方法可能是修改标记以使用标准类。然后，您可以使用活动类，该活动类会自动添加到具有.carousel-indicators该类的元素的直接子元素中。
在演示中，我重写了标准的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。
在此示例中，您监听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');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句