为什么我的Bootstrap Carousel不起作用？

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无法在角度7中工作。

Answer 1

正如我已经解释的here（标记为重复但什么都没发生：：

您必须将轮播的所有item（图片）都给全班carousel-item，但您只给了他们item类。与相同上一个和下一个按钮。类别应为carousel-control-prev和carousel-control-next，但您只给了他们是班级carousel-control。

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

因此基本上只需将所有<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>