CSS 如何更改自定义轮播指示器背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26425382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change customized carousel indicator background color?
提问by Rohit Daid
I want to change img-circlebackground color when it is active.
我想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>
回答by jme11
Probably the easiest way to do this withoutJavascript 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-indicatorsclass.
在没有Javascript 的情况下，最简单的方法可能是修改您的标记以使用标准类。然后，您可以使用自动附加到具有.carousel-indicators该类的元素的直接子元素的活动类。
DEMO without Javascript
没有 Javascript 的演示
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:
在演示中，我覆盖了标准的 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;
}
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.
如果您可以将内容改写为标准类，则始终可以覆盖 css 或使用 LESS 对其进行自定义。您没有发布自定义 css 或指明您使用的是 Bootstrap 2 还是 Bootstrap 3 的版本，因此我无法提供更多关于点的示例。演示中的标记使用版本 3.2.0。
You can also do this with Javascriptvia 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.
您也可以通过轮播事件使用 Javascript执行此操作。同样，此示例基于 Bootstrap 3.2.0。它不适用于版本 2，因为事件名称已更改。
DEMO using Javascript
使用 Javascript 的演示
In this example, you listen for the slid.bs.carouselevent. 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.
在本例中，您侦听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');
});
