jquery - Modify bootstrap carousel to display multiple slides simultaneously

Question

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

Answer 1

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