在没有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.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');
});