jquery - Bootstrap Carousel Indicators Color change for 1 slide -

i using default bootstrap carousel. 1 of slides has white background carousel indicators disappear on slide. have javascript/jquery solution works, seems tiny bit slow/clunky. either improve script or alternative solution, appreciated.

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

since know 1 need change (hence index()), create css styles it

.carousel .carousel-indicators li {     // normal styles } .carousel .carousel-indicators li.active {     // active styles } .carousel .carousel-indicators li:nth-of-type(3).active {     // index() 0 based index, , nth-of-type starts @ 1     // special styles 1 instance }