Question

我正在使用默认的bootstrap轮播。但我的一张幻灯片有一个白色背景，所以旋转木马指示消失在该幻灯片上。我有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
}

Answer 2

将background-color:"color"设为.carousel，.carousel-indicators li，这可能会很好。

Answer 3

一个简单的解决方案

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

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

Bootstrap Carousel指示灯1张幻灯片的颜色变化

3 个答案: