css - bootstrap 4 轮播图像未出现(包含覆盖)

Question

伙计们正在尝试用 3 个背景图像制作轮播。当旋转木马滑动时，另一个图像必须出现。发生的情况是只有第一张图片出现，其余的不会出现，尽管 slider 的背景颜色会出现，而不是背景图片。

所以我需要显示所有背景图像

谢谢!

HTML代码

 <div class="slider">
    <div id="main-slider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <h1>We are an independent <br>design and <span>development</span><br> agencey.</h1>
            <div class="overlay"></div>
            <div class="carousel-item active"></div>
            <div class="carousel-item"></div>
            <div class="carousel-item"></div>
        </div>
    </div>
</div>

CSS 代码

         .slider {
            background-color: #ddd;
        }
        .carousel-indicators li {
            width: 14px;
            height: 14px;
            padding: 0px;
            cursor: pointer;
            background: none;
            border-radius: 50%;
            border: 2px solid #fff;
        }
        .carousel-indicators li:hover {
            background: #fff;
        }
        .slider .carousel-inner {
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .carousel-inner h1 {
            z-index: 3;
            left: 4rem;
            color: #fff;
            line-height: 1.4;
            max-width: 800px;
            font-size: 4.2rem;
            position: absolute;
        }
        .carousel-inner h1 > span {
            padding: 0 1rem;
            background-color: #ed1d24;
        }
        .slider .overlay {
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .slider .carousel-item:nth-child(1) {
            background: url(../images/slider_001.jpg) no-repeat center center;
            background-size: cover; 
        }
        .slider .carousel-item:nth-child(2) {
            background: url(../images/slider_002.jpeg) no-repeat center center;
            background-size: cover; 
        }
        .slider .carousel-item:nth-child(3) {
            background: url(../images/slider_006.jpeg) no-repeat center center;
            background-size: cover; 
        }

Answer 1

1) 不要将div 与carousel-item 一起使用，以使用任何其他html 元素，直到它与div 一起计算你可以使用 例如

2) 在css中设置carousel-item的高度

3) 使用 nth-of-type 而不是 nth-child

点击这里: https://codepen.io/anon/pen/JmyVoX