html中如何设置背景图轮播,css3 – 如何更改自定义轮播指示器背景颜色？

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

});