php - Carousel with three items on each slide

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>
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.