Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >PHP和Bootstrap中的多项轮播

PHP和Bootstrap中的多项轮播
EN

Stack Overflow用户
提问于 2019-07-09 13:42:37
回答 1查看 710关注 0票数 0

我有一个电子商务网站,并试图在产品页面底部的旋转木马中添加相关产品:

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

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

每个carousel项都有固定的宽度和高度:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.carousel-item{
    width:300px;
    height:400px;
    border:1px solid var(--grey3);
}

我尝试使用Bootstrap (如这里所示的https://www.youtube.com/watch?v=SAyLQVR1t5s)将我的旋转木马项目拆分成列,但我需要它们具有特定的大小来容纳产品信息,所以当我调整屏幕大小时,在旋转木马项目中使用灵活的列来容纳每个产品将不起作用。

我的PHP代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$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>';
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-31 08:57:29

为了便于将来参考,我不再使用Bootstrap,而是按照建议使用https://kenwheeler.github.io/slick/,这样就容易多了

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56953996

复制
相关文章
Bootstrap轮播
Bootstrap提供了一个强大的轮播(Carousel)组件,可以轻松地创建漂亮的图片或内容轮播。轮播组件可以用于展示多个项目,自动循环播放,还可以通过控制按钮或指示器手动导航。
堕落飞鸟
2023/05/17
4300
bootstrap carousel 轮播
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>
用户5760343
2019/07/07
9100
bootstrap轮播图实现
2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度,1000=1m,单位是毫秒
十月梦想
2018/08/29
1.9K0
开心档之bootstrap轮播
Bootstrap4 轮播 轮播是一个循环的幻灯片: ---- 如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 实例 <div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-t
爱学iOS的小麦子
2023/05/09
6180
前端|Bootstrap 实例 - 简单的轮播插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。要使用Bootstrap,需要先引入Bootstrap的相关文件。
算法与编程之美
2020/05/29
3.9K0
前端|Bootstrap 实例 - 简单的轮播插件
BootStrap做图片轮播效果(解析)
做不同的好看的效果一直是做一个小前端的目标,都希望可以做出不一样的页面,炫酷的页面,但是技术有的时候跟不上的时候只能是模仿,看别人是怎么做的,其实模仿的过程也就是学习的一个过程,能看明白别人的代码也是一种进步,今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果。
何处锦绣不灰堆
2020/05/29
3.1K0
BootStrap做图片轮播效果(解析)
bootstrap 轮播 幻灯片 常用样式
<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
用户5760343
2019/07/05
1.9K0
bootstrap 轮播 幻灯片 常用样式
bootstrap 轮播 幻灯片 常用样式 2
<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
用户5760343
2019/07/05
1.2K0
Bootstrap 轮播(Carousel)插件向站点添加滑块的方式
如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
好派笔记
2021/09/18
2.8K0
bootstrap3 轮播图片 传送带 carousel
('.carousel').carousel({ interval: 8000 // 8 seconds vs. default 5 }); });
用户5760343
2019/10/14
1.6K0
bootstrap3  轮播图片 传送带 carousel
多项分布和的分布_bernoulli多项式
二项分布的典型例子是扔硬币,硬币正面朝上概率为p, 重复扔n次硬币,k次为正面的概率即为一个二项分布概率。(严格定义见伯努利实验定义)
全栈程序员站长
2022/11/18
8110
js 水平轮播和透明度轮播的实现
主要思路:透明度轮播相对水平轮播的实现更简单一点。首先在HTML里建一个绝对定位的div盒子,然后在这个div盒子里用列表的方式插入四张图片,设置为绝对定位,并且块排列;接着在js中实现动态效果,透明轮播的实现就是将前一张图片的透明度设置为0,需要轮播的那一张图片的透明度设置为1,在js的对象中实现,最后实现手动点击轮播,子弹轮播,自动轮播。
不愿意做鱼的小鲸鱼
2022/08/24
12.5K0
js 水平轮播和透明度轮播的实现
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
如果按照从前需要在网站上加上幻灯片、图片轮播效果,早年老蒋做企业网站的时候是使用的Flash焦点图,后来用jquery幻灯片,虽然手边平时都积累备用几款常用的效果,毕竟这类的实例代码网上很多。但是,如果我们有使用Bootstrap框架那就更简单了,因为脚本框架中内置Carousel可以快速实现。
老蒋
2021/12/27
1.3K0
bootstrap 中的 less
Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。
用户5760343
2019/07/05
7750
Flutter中的轮播图组件
今天我们来介绍一款Flutter的第三方组件库——flutter_swiper。
拉维
2019/09/04
2.5K0
Flutter中的轮播图组件
【Java 进阶篇】深入浅出:Bootstrap 轮播图
在现代网页设计中,轮播图是一个常见的元素。它们可以用于展示图片、广告、新闻、产品或任何您希望吸引用户注意力的内容。要实现一个轮播图,您通常需要一些复杂的HTML、CSS和JavaScript代码,这对于初学者来说可能会感到困难。但幸运的是,有一些强大的工具可以帮助我们轻松创建漂亮的轮播图,其中之一就是 Bootstrap。
繁依Fanyi
2023/10/23
6790
【Java 进阶篇】深入浅出:Bootstrap 轮播图
Bootstrap幻灯轮播如何支持触屏左右滑动手势?
  最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hamme
ytkah
2018/03/06
3.7K0
第124天:移动web端-Bootstrap轮播图插件使用
> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整
半指温柔乐
2018/09/11
6.3K0
开心档-软件开发入门之Bootstrap4 轮播
在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本::
iOS程序应用
2023/04/17
6360
开心档-软件开发入门之Bootstrap4 轮播
求多项式的和
题目:求1-1/3+1/5-...+1/(2n-1)的和,当第n项的绝对值小于1e-6时停止相加,输出之前各项之和。
布衣者
2021/09/07
3280

相似问题

Bootstrap 4-多项轮播响应

10

使用php实现多个Bootstrap轮播

12

wordpress中的多项轮播引导

11

jquery缩放和引导多项轮播问题

10

角度(闪烁)中多项轮播的问题

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文