I'm currently working on creating a carousel with 3 background images. The issue I'm facing is that only the first image appears when the carousel slides, while the rest do not display properly - instead, the background color of the slider shows up.
I want all the background images to be visible as intended.
Thank you!
HTML CODE
<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> agency.</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 CODE
.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;
}