Question

关于添加Bootstrap轮播组件的非常简单的问题...我使用下面的代码在我的网站上添加一个简单的图片/轮播部分。 Here is the page from Bootstrap where I got it.当我打开它时，它只是静态加载页面上的所有图像，就像我刚刚正常添加它们一样。

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="img/hotyellowpinkpop.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="img/pinkyellowater.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="img/purpleyellowmoons.jpg" alt="Third slide">
    </div>
  </div>
</div>

我在html文档中存在并链接了bootstrap js文件。我错过了什么？谢谢

Answer 1

您使用的.carousel-item应该是.item。您可以在此处查看示例https://getbootstrap.com/examples/carousel/

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="d-block img-fluid" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="First slide">
    </div>
    <div class="item">
      <img class="d-block img-fluid" src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img class="d-block img-fluid" src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Third slide">
    </div>
  </div>
</div>

＆＃13;

Answer 2

以下是您需要检查的一些事项：

bootstrap是否已满载？
- .js和.css文件
你是否已经启动了corousel？
- 这里是用于初始化的jQuery：$('.carousel').carousel()

如果你已经完成了这些事情，请告诉我们，或者给我们链接到您遇到问题的页面，或者在CodePen或JSFiddle等上为我们重现。

添加Bootstrap轮播组件

2 个答案: