PHP和Bootstrap中的多项旋转木马

Question

I have an e-commerce site and am trying to add related products in a carousel at the bottom of the product page:

I query my DB to get the related products and then create a simple Bootstrap carousel.

However, I want there to be more than one item on each slide, but the number of items might change depending on screen size.

Each carousel item is a fixed width and height:

.carousel-item{
    width:300px;
    height:400px;
    border:1px solid var(--grey3);
}

I tried splitting my carousel item into columns with Bootstrap (as shown here https://www.youtube.com/watch?v=SAyLQVR1t5s) but I need them to be a specific size to accommodate product info so having flexible columns within a carousel item to hold each product won't work when I resize the screen.

My PHP code is as follows:

$related .= '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">';
$related .= '<div class="carousel-inner">';

$i = 0;
$params = [$product_name,$product_name,$_SESSION['locale']['product_set']];
$sql = "SELECT * FROM products WHERE MATCH(product_name) AGAINST(?) AND product_name!=? AND product_set=? LIMIT 15";
$stmt = DB::run($sql,$params);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $related_product_id = $row["id"];
    $related_product_name = $row["product_name"];

    $related .= '<div class="carousel-item';
    if($i==0){$related .= ' active';}
    $related .= '">';
    $related .= '//product_info';
    $related .= '</div>';

    $i++;
}

$related .= '</div>';
$related .= '<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">';
$related .= '&lsaquo;';
$related .= '</a>';
$related .= '<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">';
$related .= '&rsaquo;';
$related .= '</a>';
$related .= '</div>';

Answer 1

For future reference, I stopped using Bootstrap and used https://kenwheeler.github.io/slick/ as suggested and it is so much easier