Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify bootstrap carousel to display multiple slides simultaneously

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.

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.

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.

Thanks, Sharma

like image 926
Sharma Avatar asked Mar 21 '14 12:03

Sharma


People also ask

How do I change the interval on bootstrap carousel?

You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements.


1 Answers

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++) {

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

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

like image 145
BENARD Patrick Avatar answered Nov 09 '22 23:11

BENARD Patrick