Question

我在代码中使用Bootstrap 4轮播。但这一次显示了我在单个项目中使用的所有三个图像。这是代码：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="..." class="d-block w-100" alt="...">
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>

现在，我想在单个轮播项目中显示单个图像。在我的代码中，我在做什么错了？

Answer 1

因为您的html代码都很好。请确保。

正确包含了Bootstrap 4 CSS和JS文件。
正确包含了jQuery。

注意：：检查控制台（按 F12 并单击控制台）以查看错误。您必须在那找到一些东西。

Answer 2

您提供的示例还不完整，但是可能缺少Javascript资产。只需确保那里有JS，并且它位于CSS样式表之后即可。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 3

请确保Bootstrap 4 CSS 和 JS 文件已在您的轮播页面中链接具体来说， jquery.min.js 和 popper.min.js 且必须 bootstrap.min.js 飞行，然后将此代码粘贴到轮播上您要显示的页面

在这里您可以找到有关轮播Bootstrap Carousel Details的更多详细信息

如果设置正确，您会看到这样的轮播：

我在代码中使用Bootstrap 4传送带.Bootstrap 4传送带不起作用

3 个答案: