我有一个电子商务网站,并试图在产品页面底部的旋转木马中添加相关产品:
我查询我的数据库以获取相关产品,然后创建一个简单的Bootstrap carousel。
但是,我希望每张幻灯片上有多个项目,但项目的数量可能会根据屏幕大小而变化。
每个carousel项都有固定的宽度和高度:
.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 .= '‹';
$related .= '</a>';
$related .= '<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">';
$related .= '›';
$related .= '</a>';
$related .= '</div>';
发布于 2019-07-31 08:57:29
为了便于将来参考,我不再使用Bootstrap,而是按照建议使用https://kenwheeler.github.io/slick/,这样就容易多了
https://stackoverflow.com/questions/56953996
复制相似问题