简单的引导轮播不适用于 Angular 8

Question

我正在使用 Angular 8 和 Bootstrap 4.5 版以及一个很棒的字体工具包。我在一个名为 font-project 的组件中。当我尝试使用轮播来滑动一些图像时，轮播指示器会像重击光标一样创建一个超链接，但它不起作用，它停留在第一张图像上。虽然在带有轮播控件图标的情况下，它会创建一个超链接并在左下角显示一个带有 http://localhost:4200/font-project#example 的地址，但它不起作用，它仍然停留在第一个图像上。

我想弄清楚的代码如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="/font-project#example" data-slide-to="0" class="active"></li>
            <li data-target="/font-project#example" data-slide-to="1"></li>
            <li data-target="/font-project#example" data-slide-to="2"></li>
            <li data-target="/font-project#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="/font-project#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="/font-project#example" class="carousel-control-next" data slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>

Answer 1

您可以使用ui-carousel 库进行滑动..]

npm i angular-ui-carousel

更多详情click

Answer 2

指标的 data-target 和控件的 href 属性都应该与最顶层 div 的 id 匹配：<div id="example" class="carousel slide" data-ride="carousel">。

从这些属性中删除“/font-project”，并为最后一个链接修复data-slide 中缺少的连字符，这样就可以了：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#example" data-slide-to="0" class="active"></li>
            <li data-target="#example" data-slide-to="1"></li>
            <li data-target="#example" data-slide-to="2"></li>
            <li data-target="#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="#example" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>