Bootstrap Carousel Indicators 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

既然您已经知道需要更改哪个（因此是您的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
}