如何更改自定义轮播指示器背景颜色? [英] How to change customized carousel indicator background color?

问题描述

我想在img-circle启用时更改其背景颜色.

I want to change img-circle background color when it is active.

<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类将活动类自动添加到元素的直接子元素中.

Probably the easiest way to do this without Javascript is to modify your markup to use the standard classes. Then you can just use the active class that gets automatically appended to the immediate child elements of the element with the .carousel-indicators class.

在演示中，我重写了标准的Bootstrap CSS，并利用了bootstrap.js通过一些自定义css附加到.carousel-indicators子元素的活动类:

In the demo, I override the standard Bootstrap CSS and take advantage of the active class that is appended to the .carousel-indicators child elements by the bootstrap.js via some custom css:

.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版.

If you can rework your content into the standard classes, you can always overwrite the css or customize it with LESS. You didn't post your custom css or indicate if you're using a version of Bootstrap 2 or 3 so, I couldn't provide more on point example. The markup in the demo is using version 3.2.0.

您也可以通过轮播事件使用Java 来执行此操作.同样，此示例基于Bootstrap 3.2.0.由于事件名称已更改，因此它不适用于版本2.

You can also do this with Javascript via the carousel events. Again, this example is based on Bootstrap 3.2.0. It will not work with version 2, as the event names changed.

在此示例中，您监听slid.bs.carousel事件.轮播即将滑动时，此按钮会触发，因此，要获取下一个活动幻灯片，您必须使用event.relatedTarget.然后，要找到相应的指标，您可以使用下一个活动幻灯片的索引来获取轮播指标，该指标在data-slide-to属性中具有匹配的值.

In this example, you listen for the slid.bs.carousel event. This fires as soon as the carousel is about to slide, so to get the next active slide, you have to use the event.relatedTarget. Then to find the corresponding indicator, you can use the index of the next active slide to get the carousel indicator with the matching value in the data-slide-to attribute.

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

这篇关于如何更改自定义轮播指示器背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！