I need a carousel based on attached image. my code below is only showing every active slide. Any idea how to adjust the size of the active slide and a little bit smaller for previous and next slide and overlaps with each other so that the active slide is at the center? tia
<div id="carouselExampleSlidesOnly" class="carousel slide mt-5 mx-3" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="<?php echo IMAGES; ?>/girl-player.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php echo IMAGES; ?>/pixel-player.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php echo IMAGES; ?>/pixel-player.jpg" alt="Third slide">
</div>
</div>
</div>