Bootstrap Carousel Indicators not working properly

Question

I am designing a website for a client's portfolio. In the index I have a Bootstrap Carousel. This carousel shows the different projects, and I've created some indicators using text instead of the typical indicators. I will show you an image so you can see it.

So here's my problem: the slides are changing properly, when I click the indicators it goes to the right slide, as expected. But the thing is that the indicators are not displayed as "Active", only the first one (which is active by default), because I wrote on the CSS that when an indicator is clicked (active, I guess), I want it to become orange.

In the image you can see the "Facebook" project in color orange, but actually the image that it's displayed and the indicator that I clicked correspond to the project called "Clasico".

I don't know what to do as everything looks to be well written and in its 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 wj a va 2s . co 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> 

Answer 1

您的代码在我的最终工作正常，但为了您的客户的SEO，您应该为您的图像添加alt属性。