Carousel with three items on each slide - php

Question

I just can't get my head around this.
I want to fetch product images/items from the database and show in a carousel. But i want to have 3 images/items on each slide.
I have tested that it work by just hardcoding/repeating the code, but i want it to work in the foreach loop that i run from the result of the database question. But i just cant get it to work properly.
Here is my code that i am working on.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner"> <?php
$x=0;
foreach($result as $r)
{
if (($x % 3) == 0)
{?>
<div class="carousel-item <?php if($x == 0){ echo "active"; }?>">
<div class="album py-5 bg-light">
<div class="container">
<div class="row"><?php
}?>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" style="max-height: 300px"
src="../productimages/<?php echo $r['pid']."/".$r['filename']; ?>"
alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text
below as a natural lead-in to additional content. This content
is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div><?php
if (($x % 3) == 0)
{?>
</div>
</div>
</div>
</div><?php
}
$x++;
}?>
</div>
<button class="carousel-control-prev"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><i
class="bi bi-arrow-left-square-fill text-warning" fill="black"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon bs-orange" aria-hidden="true"><i
class="bi bi-arrow-right-square-fill text-warning"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Next</span>
</button>
</div>