Question

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

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

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

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

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

我尝试使用引导程序将轮播项目拆分为多个列（如此处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/，它非常简单

PHP /引导程序-多项目轮播

1 个答案: