为什么我的旋转木马幻灯片只显示一个在另一个下面

Question

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

这只是不适用于我经常使用的codeply。它在codepen上确实有效，一旦我通过atom代码编辑器将它添加到html和CSS文件中，它就会有效。它唯一不会运行的代码层，我在代码层中安装了javascript和引导程序包。

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

Answer 1

忽略这个问题。我并没有保存我选择的框架，它是codeply中最新的引导程序版本。它运行良好。