I'm looking to customize my Bootstrap carousel by adding unique background images to each item. Here's a snippet of my HTML:
<!-- Start of carousel -->
<div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"> <!-- Global carousel div -->
<div class="carousel-indicators"> <!-- Bottom lines with the active marked out (class="active") -->
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner"> <!-- Div containing the carousel items -->
<div class="carousel-item active"> <!-- Individual carousel item -->
<div class="container">
<div class="carousel-caption text-start">
<h1>The leaders in...</h1>
<p>Fermentum netus tempor sed hendrerit sit est proin dictum duis! Luctus orci faucibus sagittis natoque metus libero conubia hendrerit!</p>
<p><a class="btn btn-lg btn-primary" href="#">See more</a></p>
</div>
</div>
</div>
<!-- More carousel items here -->
</div>
<!-- Button to navigate to previous item -->
<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<!-- Button to navigate to next item -->
<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- End of carousel -->
And this is my CSS:
.container{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 50px;
}
.carousel-item{
height: 32rem;
/*background-color: #777;*/
color: white;
position: relative;
}
I've attempted various solutions I found online but none seem to work for me. My goal is to have full-width, full-height background images on each carousel item. Can anyone provide some assistance?
Thank you in advance!