Question

我正在设计一个用于客户投资组合的网站。在索引中，我有一个Bootstrap Carousel。该轮播展示了不同的项目，我使用文本而不是典型的指标创建了一些指标。我将向您显示图像，以便您可以看到它。

所以这是我的问题：幻灯片正在正确更改，当我单击指示器时，它按预期转到了正确的幻灯片。但是，事实是指标没有显示为“活动”，只有第一个显示（默认情况下处于活动状态），因为我在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属性。

Bootstrap轮播指示器无法正常工作

1 个答案: