Question

作为初学者，我希望我的问题的解决方案不太明显:-P 我已经检查了stackoverflow中的几个问题，阅读了Bootstrap文档，更改了代码中的许多属性和类名。 Bootstrap脚本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>

相关CSS如下：

/* Products Carousel */
.carousel-inner {
    background-color: #E48500;
    display: flex;
    padding: 8%;
    align-items: center;
}

.carousel-slide {
    justify-content: center;
    display: flex;
    height: auto;
}

.carousel-image {
    display: block;
    height: auto;
    margin: auto;
    max-width: 90%;
}

@media only screen and (min-width: 768px) {
    .carousel-image {
        float: left;
        margin-right: 24px;
        width: 50%;
        height: auto;
    }
}

.carousel-text {
    color: #221110;
    font-size: 2.33rem;
    line-height: 1.5;
    margin-top: 16px;
    margin-left: 24px;
    padding-top: 8px;
}

.carousel-control-prev, .carousel-control-next {
    background-color: #D14D13;
    margin: auto 0;
    position: absolute;
    height: 170px;
    width: 51px;
}

Answer 1

请检查代码笔链接以获取解决方案-Codepen solution link 您错过了在“ 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>

Answer 2

感谢您的帮助，AKNair。在阅读了您的答案以及您如何通过少量更改使它在Codepen上工作后，我意识到我的问题是图像，因为这些图像未包含在我的问题中。显然，“ display：flex”与轮播不兼容。

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

Bootstrap Carousel一次显示所有幻灯片

2 个答案: