维护：自定义Carousel指标后的活动类

Question

从ol标签中删除类轮播指示器后，活动类不再循环通过我的li。我删除轮播指示器类的原因是因为我想用字母替换点。

编辑：为了澄清，当幻灯片处于活动状态时，我的轮播指示灯不再突出显示我的问题是如何在删除轮播指示器类后实现这一点。

＆＃13;

＆＃13;

section {
  text-align: center;
}

section>ul {
  list-style-type: none;
  font-weight: italic;
  font-family: sans;
  font-size: 1.8vh;
}

section>ul>li {
  font-weight: bold;
  cursor: pointer;
  color: blue;
  font-size: 25px;
}

section>ul>li:hover {
  font-weight: bold;
  color: red;
}

section>ul>li:active {
  color: red;
}

.carousel-content {
  padding-left: 10%;
  padding-right: 10%;
}

ul {
  list-style-type: none;
  padding: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section>

  <!-- Indicators (outside)-->
  <ul class="list-inline">
    <li data-target="#about-carousel" data-slide-to="0" class="active">H</li>
    <li data-target="#about-carousel" data-slide-to="1">M</li>
    <li data-target="#about-carousel" data-slide-to="2">V</li>
    <li data-target="#about-carousel" data-slide-to="3">P</li>
  </ul>
  <div id="about-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div class="carousel-content">
          <ul>
            <li class="carouselTitle">
              <h2>Historia</h2>
            </li>
            <li class="carouselBody">
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
            </li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div class="carousel-content">
          <ul>
            <li class="carouselTitle">
              <h2></h2>
            </li>
            <li class="carouselBody">
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
            </li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div class="carousel-content">
          <ul>
            <li class="carouselTitle">
              <h2></h2>
            </li>
            <li class="carouselBody">
              Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
            </li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div class="carousel-content">
          <ul>
            <li class="carouselTitle">
              <h2></h2>
            </li>
            <li class="carouselBody">
              Property and building packaging
              <br>
              <br> Packaging Infrastructure
              <br>
              <br> Vehicles for local transport
              <br>
              <br> Vacum Cooler
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#about-carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#about-carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;