Bootstrap 4 Multiple Carousel Items (Multiple Carousel Items Shown At Once)

Question

How do you implement a carousel with multiple elements in Bootstrap 4? The documents mention several carousels, but not a carousel with several elements.

Answer 1

You can display one carousel element at the same time, but fill it with several elements. Sort of:

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

But you may wish that you could promote them one at a time. This will not happen with the download right out of the box. After introducing many carousels, I would recommend looking for another carousel library when Bootstrap doesn't match the count. Slick.js is my go-to lib for many carousel configuration options. And its pretty thin ~ 5k min'd and gzipped.

If you are configured to use the boot tray, here is a script that can provide one preliminary, several elements: http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2019 Update for Bootstrap 4

I did this using a Bootstrap 4 grid with separate columns for each carousel element. If you want to promote only one element at a time, the scenario might be something that clones slides into each element of the carousel.

 (function($) { "use strict"; $('.carousel .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); })(jQuery); 

A few elements:
http://codeply.com/go/WEbiqQvGhy

Multiple items, move one at a time:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz ( Bootstrap 4.0.0 )

Responsive 3 items to large (1 at a time), 1 item to smaller:
http://codeply.com/go/s3I9ivCBYH

---

Also see: fooobar.com/questions/77547 / ...

Answer 3

I'm working on downloading 4. This code works for me

 <div class="container"> <div class="row"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l1.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l2.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l3.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l4.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l5.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l6.jpg" alt=""/></a> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l1.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l2.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l3.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l4.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l5.jpg" alt=""/></a> </div> <div class="col-md-2 col-sm-6 col-12"> <a href="#"><img src="img/l6.jpg" alt=""/></a> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> 

This multi-tier carousel of six images slides each time as a three-dimensional. Feel free to ask me :)