Hype Blast

Home / general

Bootstrap carousel multiple frames at once

Mia Tucker |

This is the effect I'm trying to achieve with Bootstrap 3 carousel

enter image description here

Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does.

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin...

3

16 Answers

Bootstrap 5 (Update 2021)

While the carousel is mostly the same in Bootstrap 5, the concept of left and right have changed to start and end since Bootstrap now has RTL support. Therefore the left/right classes have changed. Here's an example of the multi-item CSS for 4 items (25% width columns)...

@media (min-width: 768px) { .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next { transform: translateX(25%); } .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev { transform: translateX(-25%); }
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { transform: translateX(0);
}

Since jQuery is no longer required, we use vanilla JS to clone the slides into the carousel-item divs..

let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => { // number of slides per carousel-item 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 }
})

Bootstrap 5 Multi-item Carousel Demo

Bootstrap 4 (Update 2019)

The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this...

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next { transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev { transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ transform: translateX(0);
}

Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (show 4, advance 1 at a time)
Bootstrap 4.1.0 (show 3, advance 1 at a time)
Bootstrap 4.1.0 (advance all 4 at once)
Bootstrap 4.3.1 responsive (show multiple, advance 1)new
Bootstrap 4.3.1 carousel with cardsnew

Another option is a responsive carousel that only shows and advances 1 slide on smaller screens, but shows multiple slides are larger screens. Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQuery only to move the extra slides to allow for continuous cycling (wrap around):

Please don't just copy-and-paste this code. First, understand how it works.

Bootstrap 4 Responsive (show 3, 1 slide on mobile)

@media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; }
}
<div> <div> <div> <div> <img src="//" alt="slide 1"> </div> <div> <img src="//" alt="slide 2"> </div> <div> <img src="//" alt="slide 3"> </div> <div> <img src="//" alt="slide 4"> </div> <div> <img src="//" alt="slide 5"> </div> <div> <img src="//" alt="slide 6"> </div> <div> <img src="//" alt="slide 7"> </div> <div> <img src="//" alt="slide 7"> </div> </div> <a href="#carouselExample"> <i></i> <span>Previous</span> </a> <a href="#carouselExample"> <i></i> <span>Next</span> </a> </div>
</div>

Example - Bootstrap 4 Responsive (show 4, 1 slide on mobile)
Example - Bootstrap 4 Responsive (show 5, 1 slide on mobile)

Bootstrap 3

Here is a 3.x example on Bootply:

You need to put an entire row of images in the item active. Here is another version that doesn't stack the images at smaller screen widths:

EDIT Alternative approach to advance one slide at a time:

Use jQuery to clone the next items..

$('.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)); }
});

And then CSS to position accordingly...

Before 3.3.1

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }

After 3.3.1

.carousel-inner .item.left.active { transform: translateX(-33%);
}
.carousel-inner .item.right.active { transform: translateX(33%);
}
.carousel-inner .item.next { transform: translateX(33%)
}
.carousel-inner .item.prev { transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left { transform: translateX(0);
}

This will show 3 at time, but only slide one at a time:

Bootstrap 3.x Demo

Please don't copy-and-paste this code. First, understand how it works. This answer is here to help you learn.

Doubling up this modified bootstrap 4 carousel only functions half correctly (scroll loop stops working)
how to make 2 bootstrap sliders in single page without mixing their css and jquery?
Bootstrap 4 Multi Carousel show 4 images instead of 3

14

All the above solutions are hacky and buggy. Don't even try. Use other libs. The best I have found - Works great with bootstrap, does not add junk html, highly-configurable, responsive, mobile-friendly etc...

$('.multi-item-carousel').lightSlider({ item: 4, pager: false, autoWidth: false, slideMargin: 0
});
4

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin

As of 2013-12-08 the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want

0

This is a working twitter bootstrap 3.

Here is the javascript:

$('#myCarousel').carousel({ interval: 10000
})
$('.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)); }
});

And the css:

.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next { left: 33% }
.carousel-inner .prev { left: -33% }
.carousel-control.left { background-image: none; }
.carousel-control.right { background-image: none; }
.carousel-inner .item { background: white; }

You can see it in action at this Jsfiddle

The reason i added this answer because the other ones don't work entirely. I found 2 bugs inside them, one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect.

14

Update 2019-03-06 -- Bootstrap v4.3.1

It seems the new Bootstrap version adds a margin-right: -100% to each item, therefore in the responsive solution given in the most upvoted answer in here, this property should be reset, e.g.:

.carousel-inner .carousel-item { margin-right: inherit;
}

A working codepen with v4.3.1 in LESS.

4

This is what worked for me. Very simple jQuery and CSS to make responsive carousel works independently of carousels on the same page. Highly customizable but basically a div with white-space nowrap containing a bunch of inline-block elements and put the last one at the beginning to move back or the first one to the end to move forward. Thank you insertAfter!

$('.carosel-control-right').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});
@media (max-width: 300px) { .carosel-item { width: 100%; }
}
@media (min-width: 300px) { .carosel-item { width: 50%; }
}
@media (min-width: 500px) { .carosel-item { width: 33.333%; }
}
@media (min-width: 768px) { .carosel-item { width: 25%; }
}
.carosel { position: relative; background-color: #000;
}
.carosel-inner { white-space: nowrap; overflow: hidden; font-size: 0;
}
.carosel-item { display: inline-block;
}
.carosel-control { position: absolute; top: 50%; padding: 15px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5); transform: translateY(-50%); border-radius: 50%; color: rgba(0, 0, 0, 0.5); font-size: 30px; display: inline-block;
}
.carosel-control-left { left: 15px;
}
.carosel-control-right { right: 15px;
}
.carosel-control:active,
.carosel-control:hover { text-decoration: none; color: rgba(0, 0, 0, 0.8);
}
<script src=""></script>
<div> <a href="#"></a> <div> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div> <a href="#"></a>
</div>
<div> <a href="#"></a> <div> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div> <a href="#"></a>
</div>
1

The most popular answer is right but I think the code is uselessly complicated. With the same css, this jquery code is easier to understand I believe:

$('#myCarousel').carousel({ interval: 10000
})
$('.carousel .item').each(function() { var item = $(this); item.siblings().each(function(index) { if (index < 4) { $(this).children(':first-child').clone().appendTo(item); } });
});
1

try this.....it work in mine....code:

<div> <br> <div> <!-- Indicators --> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <!-- Wrapper for slides --> <div> <div> <div> <img src=""> <img src=""> <img src=""> </div> </div> <div> <div> <img src=""> <img src=""> <img src=""> </div> </div> </div> <a href="#myCarousel"> <span aria-hidden="true"></span> <span>Next</span> </a> </div>
</div>
0

Natively it is overly complicated and messy to achieve this just with Bootstrap 3.4 Carousel and Bootstrap 4.5 Carousel javascript component features.

OK so you do not want yet another jQuery plugin... I get that.

In my opinion if you're already forced to use jQuery in your project, you might as well have a decent jQuery carousel plugin with lots powerful options.

slick.js - the last carousel you'll ever need - Ken Wheeler

 _ _ _ _ ___| (_) ___| | __ (_)___ / __| | |/ __| |/ / | / __| \__ \ | | (__| < _ | \__ \ |___/_|_|\___|_|\_(_)/ |___/ |__/

It truly is the last jQuery carousel plugin you will ever need.


Here are minified slick.js distribution sizes...


Some scenarios you may be faced with...

  • Unfortunately if you are just pulling distributed Bootstrap 3 or 4 js and css minified files from a CDN or where ever, then yeah it's another bulky jQuery plugin added to your website network requests.
  • If you are using NPM, Gulp, Bower or whatever you can just exclude Bootstraps carousel.js and carousel.scss vendors to reduce the final compiled sizes of your css and js files. Excluding all unused Bootstrap js and scss vendors will help reduced your final compiled output files anyway.

Added bonuses using slick.js...

  • Touch/swipe to scroll carousel on devices (you can drag on desktop too)
  • Define carousel options for each responsive breakpoint
  • Set mobileFirst: true or false to handle responsive breakpoint direction
  • Set how many slides (columns) you wish to show or scroll (define for each breakpoint)
  • Vertical and horizontal carousels
  • .on events for everything
  • Loads of options


Bootstrap 3 multi column slick carousel example

See codepen links below to test examples responsively...

  • - scss example with Bootstrap 3 style arrows and dots
  • - same code below simplest example...
// bootstrap 3 breakpoints
const breakpoint = { // extra small screen / phone xs: 480, // small screen / tablet sm: 768, // medium screen / desktop md: 992, // large screen / large desktop lg: 1200
};
// bootstrap 3 responsive multi column slick carousel
$('#slick').slick({ autoplay: true, autoplaySpeed: 2000, draggable: true, pauseOnHover: false, infinite: true, dots: false, arrows: false, speed: 1000, mobileFirst: true, slidesToShow: 1, slidesToScroll: 1, responsive: [{ breakpoint: breakpoint.xs, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: breakpoint.sm, settings: { slidesToShow: 3, slidesToScroll: 3 } }, { breakpoint: breakpoint.md, settings: { slidesToShow: 4, slidesToScroll: 4 } }, { breakpoint: breakpoint.lg, settings: { slidesToShow: 5, slidesToScroll: 5 } } ]
});
/* .slick-list emulates .row */
#slick .slick-list { margin-left: -15px; margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide { padding-right: 15px; padding-left: 15px;
}
#slick .slick-slide:focus { outline: none;
}
<!-- jquery 3.3 -->
<script src=""></script>
<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="">
<script src=""></script>
<!-- slick 1.9 -->
<link href="" rel="stylesheet" />
<script src=""></script>
<!-- bootstrap 3 responsive multi column slick carousel example -->
<header> <nav> <div> <a href="#">Slick in Bootstrap 3</a> </div> <div> <a href="" target="_blank">Slick Github</a> </div> </nav>
</header>
<main> <div> <div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h3>Article title</h3> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> </div> </div>
</main>

Bootstrap 4 multi column slick carousel example

See codepen links below to test example responsively...

  • - scss example with Bootstrap 4 style arrows and dots
  • - same code below simplest example...
// bootstrap 4 breakpoints
const breakpoint = { // small screen / phone sm: 576, // medium screen / tablet md: 768, // large screen / desktop lg: 992, // extra large screen / wide desktop xl: 1200
};
// bootstrap 4 responsive multi column slick carousel
$('#slick').slick({ autoplay: true, autoplaySpeed: 2000, draggable: true, pauseOnHover: false, infinite: true, dots: false, arrows: false, speed: 1000, mobileFirst: true, slidesToShow: 1, slidesToScroll: 1, responsive: [{ breakpoint: breakpoint.sm, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: breakpoint.md, settings: { slidesToShow: 3, slidesToScroll: 3 } }, { breakpoint: breakpoint.lg, settings: { slidesToShow: 4, slidesToScroll: 4 } }, { breakpoint: breakpoint.xl, settings: { slidesToShow: 5, slidesToScroll: 5 } } ]
});
/* .slick-list emulates .row */
#slick .slick-list { margin-left: -15px; margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide { padding-right: 15px; padding-left: 15px;
}
#slick .slick-slide:focus { outline: none;
}
<!-- jquery 3.5 -->
<script src=""></script>
<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<!-- slick 1.9 -->
<link href="" rel="stylesheet">
<script src=""></script>
<!-- bootstrap 4 responsive multi column slick carousel example -->
<header> <nav> <a href="#">Slick in Bootstrap 4</a> <a href="" target="_blank">Slick Github</a> </nav>
</header>
<main> <div> <div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> <div> <div> <img src="" /> <div> <h5>Article title</h5> <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p> <button>View article</button> </div> </div> </div> </div> </div>
</main>
 $('#carousel-example-generic').on('slid.bs.carousel', function () { $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child")); $(".item.active:last-child").insertBefore($(".item:first-child")); }); 
 .item.active, .item.active + .item, .item.active + .item + .item { width: 33.3%; display: block; float:left; } 
 <link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div> <!-- Indicators --> <ol> <li></li> <li></li> <li></li> </ol> <!-- Wrapper for slides --> <div> <div> <img> </div> <div> <img> </div> <div> <img> </div> <div> <img> </div> <div> <img> </div> <div> <img> </div> <div> <img> </div> </div> <!-- Controls --> <a href="#carousel-example-generic"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#carousel-example-generic"> <span aria-hidden="true"></span> <span>Next</span> </a>
</div>
<script src=""></script> <script src="" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src=""></script>

I had the same problem and the solutions described here worked well. But I wanted to support window size (and layout) changes. The result is a small library that solves all the calculation. Check it out here:

To make the script work, you have to add a new <div> wrapper with the class .item-contentdirectly into your .item <div>. Example:

<div> <div> <div> <div> First page </div> </div> <div> <div> Second page </div> </div> </div>
</div>

Usage of this library:

socialbitBootstrapCarouselPageMerger.run('div.carousel');

To change the settings:

socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;

Example:

As you can see, the carousel gets updated to show more controls when you resize the window. Check out the watchWindowSizeTimeout setting to control the timeout for reacting to window size changes.

Try this code <div> <div> <div> <div> <div> <div> <div> <img src="img/home/recommend1.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> <div> <div> <div> <div> <img src="img/home/recommend2.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> <div> <div> <div> <div> <img src="img/home/recommend3.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> </div> <div> <div> <div> <div> <div> <img src="img/home/recommend1.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> <div> <div> <div> <div> <img src="img/home/recommend2.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> <div> <div> <div> <div> <img src="img/home/recommend3.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#"><i></i>Add to cart</a> </div> </div> </div> </div> </div> </div> <a href="#recommended-item-carousel"> <i></i> </a> <a href="#recommended-item-carousel"> <i></i> </a>
</div>

UPDATE 2022 - BOOTSTRAP 5 CAROUSEL WITH MULTIPLE ITEMS

You can manage this task absolutely with bootstrap 5 CSS customization

This is a fantastic tutorial from a fantastic web developerBootstrap 5 Carousel Multiple Items Increment By 1

enter image description here

well done tutorial with intermediate live results change after change

If you wanna increase the size of the slice of the 4th card (I suggest this to give the user a better sharper hint that there is a following card), just reduce from 33.333333% to e.g. 30% this

@media (min-width: 768px) { .carousel-inner { display: flex; } .carousel-item { margin-right: 0; flex: 0 0 33.333333%; display: block; }
}
2

I've seen your question and answers, and made a new responsive and flexible multi items carousel Gist. you can see it here:

You can add multiple li in ol tag that has attribute as class with value "carousel-indicators" and with data-slide-to has sequential values like 0 to 6 or 0 to 9.

than you just need to copy and paste the div which has attribute as class with value "item".

This works for me.

<div> <!-- Indicators --> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <div> <div> <img alt="First slide" src="images/carousel/11.jpg"> </div> <div> <img alt="Second slide" src="images/carousel/22.jpg"> </div> <div> <img alt="Third slide" src="images/carousel/33.jpg"> </div> <div> <img alt="Third slide" src="images/carousel/44.jpeg"> </div> <div> <img alt="Third slide" src="images/carousel/55.jpg"> </div> <div> <img alt="Third slide" src="images/carousel/66.jpg"> </div> <div> <img alt="Third slide" src="images/carousel/77.jpg"> </div> </div> <a href="#myCarousel"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel"> <span aria-hidden="true"></span> <span>Next</span> </a>
</div>
1

Reference to above link i added 1 new thing called show 4 at time, slide one at a time for bootstrap 3 (v3.3.7)

CODEPLY:-

LIVE SNIPPET

(function(){ $('#carousel123').carousel({ interval: 2000 });
}());
(function(){ $('.carousel-showmanymoveone .item').each(function(){ var itemToClone = $(this); for (var i=1;i<4;i++) { itemToClone = itemToClone.next(); // wrap around if at end of item collection if (!itemToClone.length) { itemToClone = $(this).siblings(':first'); } // grab item, clone, add marker class, add to collection itemToClone.children(':first-child').clone() .addClass("cloneditem-"+(i)) .appendTo($(this)); } });
}());
body { margin-top: 50px;
}
.carousel-showmanymoveone .carousel-control { width: 4%; background-image: none;
}
.carousel-showmanymoveone .carousel-control.left { margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right { margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 { display: none;
}
@media all and (min-width: 768px) { .carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev { left: -50%; } .carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next { left: 50%; } .carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active { left: 0; } .carousel-showmanymoveone .carousel-inner .cloneditem-1 { display: block; }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) { .carousel-showmanymoveone .carousel-inner > .item.active.right, .carousel-showmanymoveone .carousel-inner > .item.next { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; }
}
@media all and (min-width: 992px) { .carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev { left: -25%; } .carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next { left: 25%; } .carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active { left: 0; } .carousel-showmanymoveone .carousel-inner .cloneditem-2, .carousel-showmanymoveone .carousel-inner .cloneditem-3 { display: block; }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) { .carousel-showmanymoveone .carousel-inner > .item.active.right, .carousel-showmanymoveone .carousel-inner > .item.next { -webkit-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; }
}
<link rel="stylesheet" href="">
<div>	<div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	<div>	<div><a href="#"><img src=""></a></div>	</div>	</div>	<a href="#carousel123"><i></i></a>	<a href="#carousel123"><i></i></a>
</div>
<script src=""></script>
<script src=""></script>

You Might Also Like