jQuery 修改 bootstrap carousel 以同时显示多张幻灯片

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22558936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:59:06  来源:igfitidea点击:

Modify bootstrap carousel to display multiple slides simultaneously

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

提问by Sharma

I'm wanting to modify bootstrap 3's carousel to display several slides at once. I know that I could put multiple thumbnails in a single slide (div .item) but the problem with that is that the carousel will slide past them all simultaneously moving on to the next group whereas I'm wanting to step through them one by one.

我想修改 bootstrap 3 的轮播以一次显示多张幻灯片。我知道我可以在一张幻灯片(div .item)中放置多个缩略图,但问题是轮播会同时滑过它们,然后移动到下一组,而我想逐个浏览它们.

I've found an example of exactly what I want here: http://www.bootply.com/117282The only problem with this is that I need 5 or 6 slides visible as oppose to 4. I've spent several hours attempting to modify this to work as desired but I clearly don't have a sufficient understanding of how it works.

我在这里找到了一个我想要的例子:http: //www.bootply.com/117282唯一的问题是我需要 5 或 6 张幻灯片,而不是 4 张。我花了几个小时尝试修改它以按需要工作,但我显然对其工作原理没有足够的了解。

My jquery/javascript understanding is pretty elementary but my CSS is pretty decent. Could someone show me how to modify this to display 5/6 slides simultaneously? I really appreciate the help.

我对 jquery/javascript 的理解非常初级,但我的 CSS 相当不错。有人可以告诉我如何修改它以同时显示 5/6 张幻灯片吗?我真的很感谢你的帮助。

Thanks, Sharma

谢谢,夏尔马

回答by BENARD Patrick

If you just want to overide this fiddle so :

如果你只是想覆盖这个小提琴,那么:

1: In JS : change for (var i=0;i<2;i++) {by for (var i=0;i<4;i++) {

1:在JS:改变 for (var i=0;i<2;i++) {for (var i=0;i<4;i++) {

2: In HTML : change col-lg-3(so 4 items) by col-lg-2(so 6 items)

2:在 HTML 中:将col-lg-3(因此 4 个项目)更改为col-lg-2(因此 6 个项目)

bootply: http://www.bootply.com/123662

引导http: //www.bootply.com/123662