Here are some steps to achieve it:
- Place your company name element inside the carousel-inner div, but not within a .carousel-item div to prevent sliding like the other items.
- For each slide, add an element for the service company and an image for the background.
You can use the following code as a guide:
<div id="carousel-ID" class="carousel slide" data-ride="carousel">
<h2>Company name</h2>
<div class="carousel-inner">
<div class="carousel-item active">
<h3>Company service 1</h3>
<img src="..." alt="...">
</div>
<div class="carousel-item">
<h3>Company service 2</h3>
<img src="..." alt="...">
</div>
<div class="carousel-item">
<h3>Company service 3</h3>
<img src="..." alt="...">
</div>
<div class="carousel-item">
<h3>Company service 4</h3>
<img src="..." alt="...">
</div>
<div class="carousel-item">
<h3>Company service 5</h3>
<img src="..." alt="...">
</div>
</div>
</div>
To adjust the positioning of elements and the background image using CSS, you can do the following:
.carousel h2 {
position: absolute;
z-index: 3; // To appear above the slides
margin-top: 3rem;
margin-left: 3rem;
}
.carousel-item {
// position: relative; // Just for info, already set in Bootstrap.
}
.carousel-item h3 {
position: absolute;
margin-top: 10rem; // Adjust here the space from top
margin-left: 3rem; // Adjust here the space from left
z-index: 2; // To appear above the image
}
.carousel-item img {
position: absolute;
z-index: 1; // To appear below the h3
}
This code may need adjustments to match Bootstrap styles.