为什么我的轮播幻灯片只在另一张下方显示？答案

【问题标题】：Why do my carousel slides just display one under the other?为什么我的轮播幻灯片只在另一张下方显示？
【发布时间】：2022-01-07 05:00:32
【问题描述】：

当我在浏览器中点击运行或预览时，我使用的是 Chrome，会显示以 1-3 堆叠的所有三张幻灯片的静态视图。所以他们不会在每一个之间切换。

这仅不适用于我经常使用的 codeply。它确实可以在 codepen 上工作，一旦我通过 atom 代码编辑器将它添加到我的 html 和 CSS 文件中，它就可以工作。它唯一不会运行的 codeply，我在 codeply 中安装了 javascript 和 bootstrap 包。

.carousel-item {
  height: 150px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-interval="1000">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
    </div>
    <div class="carousel-item" style="background-color: blue;">
      <img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

【问题讨论】：

请参阅How to Ask。您需要提供有关情况的完整示例。
如您所见，一旦添加了库，它就可以正常工作。请修改您的帖子，以更清楚地说明您面临的问题。

标签： html css carousel bootstrap-5

【解决方案1】：

忽略这个问题。我没有保存我选择的框架，它是 codeply 中的最新引导版本。它工作正常。

【讨论】：

您需要添加一个正确的答案。就像更正的代码一样。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。