How to change customized carousel indicator background color?

Answer 1

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.

DEMO without 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:

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

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.

DEMO using Javascript

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