Bootstrap 轮播指示器 1 张幻灯片的颜色变化

Question

我正在使用默认引导轮播。但是我的一张幻灯片有白色背景，所以轮播指示器在该幻灯片上消失了。我有可行的 Javascript/jQuery 解决方案，但它似乎有点慢/笨重。任何有助于改进脚本或替代解决方案的帮助，将不胜感激。

$('#carousel-generic').on('slid.bs.carousel', function (evt) {
    var elem = $(this).find('.carousel-indicators li'); 
    var active = $(this).find('.carousel-indicators .active');
    if(active.index() == 2) {
        elem.css('border-color', 'grey');
        elem.css('background-color', 'rgba(0,0,0,0)');
        active.css('background-color', 'grey');
    } else {
        elem.css('border-color', 'white');
        elem.css('background-color', 'rgba(0,0,0,0)');
        active.css('background-color', 'white');
    }
})

Answer 1

一个简单的解决方案

.carousel-indicators li {
    background-color: #669966;
}

.carousel-indicators .active {
    background-color: #FF7600;
}

Answer 2

将background-color:"color" 设置为.carousel, .carousel-indicators li, 这可能工作正常。

Answer 3

既然您已经知道需要更改哪一个（因此您的 index()），那么只需为其创建 CSS 样式

.carousel .carousel-indicators li {
    // normal styles
}
.carousel .carousel-indicators li.active {
    // active styles
}
.carousel .carousel-indicators li:nth-of-type(3).active {
    // index() is 0 based index, and nth-of-type starts at 1
    // special styles for that one instance
}