Html 一次显示所有幻灯片的引导转盘

作为一个初学者，我希望我的问题的解决方案不是太明显 我已经检查了stackoverflow中的几个问题，阅读了引导文档，更改了代码中的许多属性和类名。引导脚本CDN位于html正文的底部

现在，所有的幻灯片都同时显示，当我单击控制按钮时，图像似乎在循环，但幻灯片总是一张叠在另一张上

编辑-更多细节：我确实尝试了“carousel item”（而不仅仅是“item”）和“w-100”和“d-block”类，但它们似乎没有任何效果。 在我添加这些类时，更新了代码以反映这些类

<!-- Carousel -->
    <div id="product-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-slide carousel-item active">
                <img class="carousel-image d-block w-100" src="image.jpg" alt="">
                <h3 class="carousel-text">Carousel text over here!
                    <button href="#" class=""></button></h3>
            </div>
            <div class="carousel-item carousel-slide">
                <img class="carousel-image d-block w-100" src="img.jpg" alt="">
                <h3 class="carousel-text">Carousel text over here!
                    <button href="#" class=""></button>
                </h3>
            </div>
            <div class="carousel-item carousel-slide">
                <img class="carousel-image d-block w-100" src="img.jpg" alt="">
                <h3 class="carousel-text">Carousel text over here!
                    <button href="#" class=""> </button>
                </h3>
            </div>
        </div>
        <!-- Carousel Controls -->
        <a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
            <svg width="22" height="43" viewBox="0 0 22 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.68334e-06 23.7448L2.07584e-06 19.2552L22 0L22 7.59695L9.77822 21.4997L22 35.4031L22 43L1.68334e-06 23.7448Z" fill="white" />
            </svg>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
            <svg class="carousel-next-button" aria-hidden="true" width="22" height="43" viewBox="0 0 22 43" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 19.2552V23.7448L0 43V35.4031L12.2218 21.5003L0 7.59695V0L22 19.2552Z" fill="white" />
            </svg>
            <span class="sr-only">Next</span>
        </a>
    </div>

---

请检查代码笔链接以获取解决方案- 您没有为“carousel-inner”中的div使用正确的类名“carousal-item”。这是正确的结构-

 <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>

我感谢你的帮助，阿克奈尔。在阅读了您的答案以及您如何在Codepen上只做了一些更改之后，我意识到我的问题是图像，因为它们不包括在我的问题中。显然，“display:flex”与转盘不兼容

我所要做的就是删除flex相关的属性

 <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>