为什么我的引导轮播不工作？

Question

我正在使用 Angular 7 制作 MEAN 堆栈应用程序。我使用 Bootstrap Carousel，但它不起作用。

#slider .item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->


<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide2">
      <img src="../../assets/public/5.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide3">
      <img src="../../assets/public/cardrive.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
  <a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>

我的代码有什么错误吗？我认为#slider 在 Angular 7 中不起作用。

Answer 1

正如我已经解释过的here（标记为重复但没有发生任何事情）：

你必须给轮播的所有items（图片）类 carousel-item 但你只给了他们课程item。与 上一个和下一个按钮。课程应该是 carousel-control-prev 和 carousel-control-next 但你只给了 他们的班级carousel-control。

其余的似乎工作得很好！在处理 Bootstrap 时，你 总是要注意这些类，因为它们必须完全正确 完全可以正常工作。 （您也可以删除 popper.js-script 在底部，因为它根本没有使用。）

所以基本上只需将所有<div class="item"> 更改为<div class="carousel-item"> 并将-next 和-prev 添加到控件 像我在这里做的那样：

#slider .carousel-item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

.carousel-item>img {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->



<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide2">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide3">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

我也有同样的问题。 您必须仔细阅读以依赖关系为重点的入门轮播。 https://ng-bootstrap.github.io/#/getting-started

不要忘记在您的 HTML 文件中添加 BootstrapCDN（内容交付网络）： https://www.bootstrapcdn.com/

这是我工作区中的 BootstrapCDN：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>