I'm struggling to set the correct position for prev/next btns in a bootstrap5 carousel. The initial code I used as model was for a carousel that displays 4 images at once, I changed to 3 images at once. I added also some space between images.
I know that prev/next btns have position:absolute, I changed to position:relative and tried to position it by changing margins but it was worse.
Is there a solution on how to fix this problem?
The buttons look like this now: buttons
<div class="container text-center my-3 mb-5 carousel2">
<div class="row mx-5 my-5 justify-content-between align-items-center">
<div id="Carousel-2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/woman1.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Jane Dow</strong>
<p class="mt-0 me-2" style="font-size: 13px;">CEO - AXA Group</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/man1.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Dave Johnson</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Marketing Manager - Johnson's & Co</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/man2.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Roger Smith</strong>
<p class="mt-0 me-2" style="font-size: 13px;">CEO - Hi-Tech Intl.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/woman2.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Diana Russel</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Manager - Creativity Hub</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#Carousel-2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#Carousel-2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
if you want to make them stable in fixed positions use this code give your carousel position relative as a parent for your prev and next buttons.
the top and transform make your buttons stay in the middle of your container.
.carousel {
position: relative;
}
.carousel-control-prev , .carousel-control-next {
position: absolute;
top: 50%;
transform: TranslateY(-50%);
}
.carousel-control-prev {
right: auto;
left: 20px;
}
.carousel-control-next {
left: auto;
right: 20px;
}