I've been working on a website project for a client's portfolio, and I'm using Bootstrap Carousel in the index. The carousel showcases different projects with custom indicators made of text instead of the usual style. If you take a look at the image I have linked here, you'll see what I mean.
https://i.sstatic.net/1VQBV.jpg
Here's where I'm running into an issue: while the slides transition correctly and clicking the indicators moves to the right slide, the active state doesn't display correctly. Only the first indicator shows as "Active," even though I specified in the CSS that an active indicator should turn orange when clicked (indicating selection). The example in the image highlights the "Facebook" project in orange, but it corresponds to the image displayed from the "Clasico" project.
I'm stumped because everything seems properly implemented and in place.
HTML CODE
.carousel {
position: absolute;
width: 895px;
height: 638px;
margin: 0 auto;
top: 50%;
-ms-transform: translateY(-30%);
transform: translateY(-30%);
margin-bottom: -30px;
}
.carousel-inner img {
max-width: 100%;
max-heigth: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-indicators {
margin-bottom: -30px;
text-align: left;
float: left;
color: #999999;
}
.carousel-indicators li,
.carousel-indicators li.other {
width: 100px;
background-color: transparent;
border-radius: 0;
text-indent: 0;
<!-- ww w.j a va 2s . c o m-->font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 19px;
letter-spacing: 1px;
margin: 0 2px;
}
.carousel-indicators span {
margin-right: 20px;
}
.carousel-indicators li.active {
color: #fcb970;
}
.carousel-indicators li:hover {
color: #fcb970;
}<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xl-10 text-center">
<div id="slides" class="carousel slide carousel-fade">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active other number-01"><span>Journey </span></li>
<li data-target="#slides" data-slide-to="1" class="other number-02"><span>Suchard </span></li>
<li data-target="#slides" data-slide-to="2" class="other number-03"><span>Ramps </span></li>
<li data-target="#slides" data-slide-to="3" class="other number-04"><span>Facebook </span></li>
<li data-target="#slides" data-slide-to="4" class="other number-05"><span>Products </span></li>
<li data-target="#slides" data-slide-to="5" class="other number-06"><span>Lab </span></li>
<li data-target="#slides" data-slide-to="6" class="other number-07"><span>Clásico </span></li>
<li data-target="#slides" data-slide-to="7" class="other number-08"><span>Tribute </span></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://gonzzzalo.com/work/journey"><img src="img/Journey.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/suchard"><img src="img/Suchard.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/ramps"><img src="img/Tutaller.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/facebook-year-on-review"><img src="img/Facebook.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/devices"><img src="img/Products.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/varios"><img src="img/LAB.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/clasico"><img src="img/Clasico.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://gonzzzalo.com/work/tribute"><img src="img/Tribute.jpg"></a>
</div>
</div>
</div>
</div>