Html 为什么引导示例页面中的旋转木马不起作用？_Html_Css_Bootstrap 4_Carousel

Html 为什么引导示例页面中的旋转木马不起作用？

html css bootstrap-4

Html 为什么引导示例页面中的旋转木马不起作用？,html,css,bootstrap-4,carousel,Html,Css,Bootstrap 4,Carousel,我正在用Bootstrap做一个网页，我想添加一个旋转木马。因此，我转到示例页面，查找carousel模板（）的源代码。我将旋转木马部分复制/粘贴到我的网页中，但它不起作用正如你所看到的，我得到了原始旋转木马的一小部分，我不知道为什么，因为它应该是引导旋转木马的原始源代码。这里是我的代码中与旋转木马相关的部分： <body> <?php include "header.php" ?> <main role="ma

我正在用Bootstrap做一个网页，我想添加一个旋转木马。因此，我转到示例页面，查找carousel模板（）的源代码。我将旋转木马部分复制/粘贴到我的网页中，但它不起作用

正如你所看到的，我得到了原始旋转木马的一小部分，我不知道为什么，因为它应该是引导旋转木马的原始源代码。这里是我的代码中与旋转木马相关的部分：

 <body>
    <?php include "header.php" ?>
    <main role="main">
     <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption text-left">
            <h1>Example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption text-right">
            <h1>One more for good measure.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>





示例标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

另一个例子是标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

再来一杯。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

尝试在HTML正文标记的末尾添加jquery插件和引导js。你忘了添加jquery和bootstrapJS，如果不添加这个旋转木马将无法工作。正如您所说，您复制并粘贴了该示例，因此我认为您也忘记添加自定义CSS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" hre="https://getbootstrap.com/docs/4.5/examples/carousel/carousel.css">

使用jquery和引导包插件，并添加自定义CSS





示例标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。Nullam id
我是多洛尔，我是艾利特。


另一个例子是标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。Nullam id
我是多洛尔，我是艾利特。


再来一杯。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。Nullam id
我是多洛尔，我是艾利特。

您添加了脚本吗？？？是的，我添加了3个脚本：请看我的回答，我添加了您未添加的脚本。我仍然保留了原始旋转木马的一小部分。但至少现在有了您的脚本，当我单击下一个/上一个按钮时，我的旋转木马可以在幻灯片之间切换，而以前它不起作用。谢谢。因为你错过了添加jquery和bootstrap js的机会，如果没有这些，它将无法工作。我编辑了我的答案，你可以再次复制和粘贴这些代码。我复制了最后一个链接，但我仍然得到了旋转木马的一小部分。请看我的最新答案，我添加了另一个答案