Question

我正在使用angular 7制作MEAN堆栈应用程序。对于home page，我曾使用 Bootstrap Carousel 制作了一个吸引人的页面，但却无法正常工作。

这是代码 html file

<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>

css file

#slider .item {
    height: 500px;
}
.carousel-caption {
    font-size: 18px;    
}

我在使用代码时是否有任何错误？我认为 #slider 不能在角度7中工作。请帮助。

Answer 1

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

您必须将轮播的所有项（图片）提供给课程   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="http://lorempixel.com/g/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide2">
      <img src="http://lorempixel.com/g/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide3">
      <img src="http://lorempixel.com/g/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>

平均堆栈：Bootstrap Carousel无法使用角度7

2 个答案: