I am having trouble figuring out how to properly position the previous and next buttons in a bootstrap5 carousel. The original code I used as a template was for a carousel that displayed 4 images at once, but I changed it to display 3 images at once. I also added some space between the images.
I know that the prev/next buttons have position:absolute, so I tried changing it to position:relative and adjusting the margins, but it only made things worse.
Is there a solution to fix this issue?
The current appearance of the buttons can be seen here: 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>