El que tiene bootstrap tiene incluidas las flechas dentro de la imagen pero no soy muy fan ya que se pierde con la imagen, quisiera tener las flechas fuera del recuadro de la imagen, estuve jugando con CSS pero solo logro mover las flechas dentro del recuadro que incluye las imagenes.
Actualmente mi codigo es:
<div class="row">
<div class="col-md-2" style="background: #ece7de;"></div>
<div class="col-md-8" style="background: #ece7de;">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./recursos/galeria/DM_03525.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./recursos/galeria/DM_03855.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./recursos/galeria/fIMG_9002.JPG" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Before</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="sr-only">Next</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<br><br><br><br>
</div>
<div class="col-md-2" style="background: #ece7de;"></div>
</div>
Como pueden ver, las flechas se ven muy poco y dentro de la imagen, necesito que quede lo más similar a esto:
Ignoren las lineas verticales azules, son para ubicar proporción del sitio.
El CSS de bootstrap no esta modificado en nada para el carousel.
Se agradece su ayuda!