引导轮播指示器无法正常工作

Question

我正在为客户的投资组合设计一个网站。在索引中，我有一个引导轮播。这个轮播展示了不同的项目，我使用文本而不是典型的指标创建了一些指标。我会给你看一张图片，这样你就可以看到了。

所以这是我的问题：幻灯片正在正确更改，当我单击指示器时，它会按预期转到右侧幻灯片。但问题是指标没有显示为“活动”，只有第一个（默认情况下是活动的），因为我在 CSS 上写道，当点击一个指标时（我猜是活动的），我希望它变成橙色。

在图片中，您可以看到橙色的“Facebook”项目，但实际上它显示的图像和我点击的指示器对应于名为“Clasico”的项目。

我不知道该怎么做，因为一切看起来都写得很好，并且在它的位置。

HTML 代码

.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>

Answer 1

您的代码在我这边运行良好，但为了您客户的 SEO，您应该为图片添加 alt 属性。