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

Posted 2023-03-06

【中文标题】如何更改自定义轮播指示器背景颜色？

【英文标题】：How to change customized carousel indicator background color?

【发布时间】：2014-12-13 01:24:16

【问题描述】：

我想在 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】：

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