PHP 和 Bootstrap 中的多项轮播

Question

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

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

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

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

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

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

我的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/，这样就容易多了

PHP 和 Bootstrap 中的多项轮播

Multi-item carousel in PHP and Bootstrap

javascript

php

carousel

twitter-bootstrap