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 }
Comments
Post a Comment