SemanticUI SemanticUI - 1 month ago 34
CSS Question

Bootstrap 4 Multiple Items Carousel

How do you implement a multiple items carousel in Bootstrap 4? The docs mentions about multiple carousels but not a carousel with multiple items.

Answer

You can display one carousel item at a time, but fill it with multiple elements. Something like:

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

But you may then be wishing you could advance them one at a time. That isn't going to happen with bootstrap right out of the box. After implementing many carousels, I'd recommend seeking another carousel library when Bootstrap's doesn't fit the bill. Slick.js is my go-to lib for lots of carousel config options. And its a fairly slim ~5k min'd and gzipped.

If you're hard-set on using bootstrap, here is a script that can provide single advance, multi-items: http://codepen.io/MarkitDigital/pen/ZpEByz