0
votes

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.

https://i.imgur.com/qfYssmL.jpg

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 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>
1
What browser are you using? Seems to work fine on my end in both Chrome and Firefox. I click through the links and they get coloured orange appropriately. - Ivica Pesovski
Everything's fine on my end as well, I got just one error that the page is trying to load scripts from unauthenticated sources, maybe you should check where your script files are loaded from and add them in secure way. - TheUnKnown

1 Answers

0
votes

Your code works fine on my end, although for the sake of your client's SEO you should add alt attributes to your images.