修改 bootstrap carousel 以同时显示多张幻灯片 [英] Modify bootstrap carousel to display multiple slides simultaneously

问题描述

我想修改引导程序 3 的轮播以一次显示多张幻灯片.我知道我可以在一张幻灯片 (div .item) 中放置多个缩略图，但问题是轮播将同时滑过它们，同时移动到下一组，而 我想通过它们一个一个.

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.

我在这里找到了一个我想要的例子:http://www.bootply.com/117282 唯一的问题是我需要 5 或 6 张幻灯片，而不是 4 张.我花了几个小时试图修改它以使其按需要工作，但我显然没有充分了解如何有用.

I've found an example of exactly what I want here: http://www.bootply.com/117282 The 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.

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

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.

谢谢，夏尔马

推荐答案

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

If you just want to overide this fiddle so :

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

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

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

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

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

这篇关于修改 bootstrap carousel 以同时显示多张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！