Bootstrap Multiple Items Carousel (several carousel items shown at once)

Question

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

multiple items carousel means there are several carousel items shown at once. — SemanticUI, Nov 03 '16 at 03:13
How would that work? Do the items navigate as a group, or singularly? — Evan Trimboli, Nov 03 '16 at 03:17
you need to add some code @SemanticUI without code You can't get a proper answer . — MD Ashik, Nov 03 '16 at 03:19
Try something like this http://www.codeply.com/go/WEbiqQvGhy — Carol Skelly, Nov 03 '16 at 10:36

Carol Skelly · Answer 1 · 2021-05-27T17:16:40.687

19

Bootstrap 5 - update 2021

As with earlier versions the best approach is to place multiple slides inside single carousel-item. This can be done using the grid classes...

<div class="carousel-item">
   <div class="row">
     <div class="col">slide 1</div>
     <div class="col">slide 2</div>
     <div class="col">slide 3</div>
     <div class="col">slide 4</div>
   </div>
</div>
<div class="carousel-item">
   <div class="row">
     <div class="col">slide 5</div>
     <div class="col">slide 6</div>
     <div class="col">slide 7</div>
     <div class="col">slide 8</div>
   </div>
</div>

The above code will advance 4 slides at a time. If you want the carousel to advance a single slide at a time, see this question.

Bootstrap 4 - update 2019

I have done this using the Bootstrap 4 grid with separate columns for each carousel item. If you want to advance only one item at a time, the script can be something like this that clones the slides into each carousel item..

(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);

Mulitple items:
http://codeply.com/go/WEbiqQvGhy

Mulitple 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 on large (1 at a time), 1 item on smaller:
http://codeply.com/go/s3I9ivCBYH

Also see: https://stackoverflow.com/a/20008623/171456

edited May 27 '21 at 17:16

answered Nov 03 '16 at 10:50

Carol Skelly

351,302
90
710
624

2

This would be for showing 3 items at once. How you you go about if you wanted more items? Like 6 – Nifled Jun 30 '17 at 02:22
If you care about screen readers or crawlers, beware of cloning items just for display purposes – Kunal Jul 02 '18 at 20:15
unfortunately not responsive ^^ the last piece of the multi-item-bootstrap-carousel puzzle – Timar Ivo Batis Nov 14 '18 at 15:14
@TimarIvoBatis This is the repsonsive version: https://www.codeply.com/go/s3I9ivCBYH – Carol Skelly Nov 14 '18 at 15:23
1

@Zim unfortunately this has a strange "slide over previous slide" animation when going backwards. unlike your solution which has the same animation forwards and backwards. – Timar Ivo Batis Nov 14 '18 at 16:33
1

i found the reason for the faulty previous slide animation in the CSS: here's a fixed version with animations working both ways: https://www.codeply.com/go/3o7YpVVEdP – Timar Ivo Batis Nov 15 '18 at 11:26
@TimarIvoBatis could you test your example using last bs 4.2? Not working for me :/ – santyas Jan 09 '19 at 15:06
1

@santyas setting .carousel-item {margin-right: 0%;} fixes the problem. https://codepen.io/timar/pen/mabyEg – Timar Ivo Batis Jan 09 '19 at 21:12
@TimarIvoBatis great, have you tried it after that? On small screen it has a little bug when you pass it one, next (right side) slide appears from downside. – santyas Jan 10 '19 at 01:49
1

@santyas good catch. create a media query and apply only to larger screens. ((atsign))media (min-width: 576px) { .carousel-item {margin-right: 0;} i updated the codepen – Timar Ivo Batis Jan 10 '19 at 15:38
2

On Bootstrap 4.3, these solutions display ONLY the last carousel item as the first one… Any idea how to fix that? – ClemC Mar 18 '19 at 12:39

score 17 · Accepted Answer · answered Nov 03 '16 at 03:18

17

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

answered Nov 03 '16 at 03:18

Eric N

2,136
13
13

Why slick.js does not add spaces between carousel items when items to show is greater than 3? – SemanticUI Nov 03 '16 at 05:41
It has default styling rules like bootstrap. Those can be changed as necessary though. If you add padding to your items they should always have some whitespace between them. – Eric N Nov 03 '16 at 12:36
I tried adding padding on the div and img but did not put any space. – SemanticUI Nov 03 '16 at 13:34
Can you hoist it up on a codepen to tool around with real quick? – Eric N Nov 03 '16 at 13:41
I'll try to learn codeopen, but for now I edited slick-slide and set it's margin: 0px 20px; is that the place to change directly? – SemanticUI Nov 03 '16 at 22:06

score 2 · Answer 3 · answered Feb 22 '21 at 08:59

2021 Update for Bootstrap 5

Inspired by Zims approach, I have updated the stylesheet to work with Bootstrap 5.

Multiple items, move one at a time:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 100000
})

$('.carousel .carousel-item').each(function(){
    var minPerSlide = 4;
    var next = $(this).next();
    if (!next.length) {
    next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    for (var i=0;i<minPerSlide;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        
        next.children(':first-child').clone().appendTo($(this));
      }
});

@media (max-width: 768px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* display 4 */
@media (min-width: 768px) {
  .carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next,
.carousel-item-next:not(.carousel-item-start)
{
    transform: translateX(25%) !important;
  }

.carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end)
{
    transform: translateX(-25%) !important;
}

.carousel-item-next.carousel-item-start {
  transform: translateX(0) !important;
}

.carousel-inner .carousel-item-prev,
.carousel-item-prev:not(.carousel-item-end)
{
    transform: translateX(-25%) !important;
  }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div id="myCarousel" class="carousel slide container" data-bs-ride="carousel">
  <div class="carousel-inner w-100">
    <div class="carousel-item active">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=1">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=2">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=3">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=4">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=5">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=6">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=7">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col-md-3">
        <div class="card card-body">
          <img class="img-fluid" src="http://placehold.it/380?text=8">
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

https://codepen.io/mathiasmadsen/pen/xxRLKEg

the best answer!!Thank you – sreeya chowdary Mar 10 '21 at 12:34 — sreeya chowdary, Mar 10 '21 at 12:34

score 1 · Answer 4 · answered Jul 02 '18 at 18:33

i'm working on bootstrap 4. This code working 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 carousel of six image slide every time as bulk. Free to ask me :)

score 0 · Answer 5 · answered Feb 25 '21 at 15:47

I used this structure for the html to make te carousel responsive and easily editable for the number of items per slide you need. You can find the full code at the link below. It requires bootstrap 4.0.0, jquery and bootstrap js.

<div class="carousel-item col-md-6 active">
    <img class="img-fluid mx-auto d-block" src="//placehold.it/400x300?text=1" alt="slide 1">
  </div>

LINK https://codepen.io/venda93/pen/BaQJOOK

Bootstrap Multiple Items Carousel (several carousel items shown at once)

5 Answers5

Linked

Related