引导 4 轮播图片未显示(包含叠加层)

Question

>伙计们正在尝试制作带有 3 张背景图像的轮播。 当轮播滑动时，必须显示其他图像。 发生的事情是，只显示第一个图像，但其余图像不会显示，尽管将显示滑块的背景颜色，而不是背景图像。

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

谢谢！

网页代码

<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与轮播项目一起使用，以使用任何其他 html 元素，直到它被计算出来 例如，您可以使用

2(在css中设置高度轮播项

3( 使用第 n 个类型而不是第 n 个子类型

click here:https://codepen.io/anon/pen/JmyVoX