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

Answer 2

Bootstrap 5

This is an 2022 update. Bootstrap has changed a lot since 3, even 4. The codes below are easy to customize and adapt to your needs without disrupting entering in conflict with any custom css you might have.

Codepen here and new BS5 docs here

Prerequisites

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

JS

let items = document.querySelectorAll('.carousel .carousel-item')

        items.forEach((el) => {
            const minPerSlide = 4
            let next = el.nextElementSibling
            for (var i=1; i<minPerSlide; i++) {
                if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})