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

我想在活动时更改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类的元素的直接子元素的活动类.

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

转载注明原文:css3 – 如何更改自定义轮播指示器背景颜色? - 代码日志