I've been experiencing a strange issue with my carousel - whenever I click on any of the dots, dot1 disappears. Upon inspecting the CSS, I found out that when clicking on a dot, it receives a display:none property from somewhere.
Here is the code for the dots:
<ol class="dotss carousel-indicators" style="margin-top: 20px;z-index: 0;">
<li data-target="#carousel-example-generic" data-slide-to="0" class="abc active" id="a"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="abc" id="b"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="abc" id="c"></li>
</ol>
This is the code I'm using to color the dots:
$("ol li").click(function(){
var id = $(this).attr('id');
if (id == "a") {
$("#a").css("background-color", "white");
$("#b").css("background-color", "#247ba0");
$("#c").css("background-color", "#247ba0");
}
if (id == "b") {
$("#b").css("background-color", "white");
$("#a").css("background-color", "#247ba0");
$("#c").css("background-color", "#247ba0");
}
if (id == "c") {
$("#c").css("background-color", "white");
$("#a").css("background-color", "#247ba0");
$("#b").css("background-color", "#247ba0");
}
});
Here is the live link: