PHP 和 Bootstrap 中的多项目轮播

Question

我有一个电子商务网站，我正在尝试在产品页面底部的轮播中添加相关产品：

我查询我的数据库以获取相关产品，然后创建一个简单的 Bootstrap 轮播。

但是，我希望每张幻灯片上有多个项目，但项目的数量可能会根据屏幕大小而变化。

每个轮播项目都是固定的宽度和高度：

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

我尝试使用 Bootstrap 将我的轮播项目拆分为列（如此处所示 https://www.youtube.com/watch?v=SAyLQVR1t5s），但我需要它们具有特定大小以容纳产品信息，因此在轮播项目中使用灵活的列来容纳每个产品将不起作用当我调整屏幕大小时。

我的PHP代码如下：

$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

为了将来参考，我停止使用 Bootstrap 并按照建议使用 https://kenwheeler.github.io/slick/，这样更容易