Bootstrap carousel multiple frames at once
JqueryTwitter Bootstrap-3Jquery PluginsCarouselBootstrap 4Jquery Problem Overview
This is the effect I'm trying to achieve with Bootstrap 3 carousel
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...
Jquery Solutions
Solution 1 - Jquery
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 class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">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: http://bootply.com/89193
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: http://bootply.com/92514
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:
Please don't copy-and-paste this code. First, understand how it works. This answer is here to help you learn.
https://stackoverflow.com/questions/49343385/doubling-up-this-modified-bootstrap-4-carousel-only-functions-half-correctly-sc/49343508#49343508<br> https://stackoverflow.com/questions/49450116<br> https://stackoverflow.com/questions/48631386/bootstrap-4-multi-carousel-show-4-images-instead-of-3/48631630#48631630<br>
Solution 2 - Jquery
All the above solutions are hacky and buggy. Don't even try. Use other libs. The best I have found - http://sachinchoolur.github.io/lightslider 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
});
Solution 3 - Jquery
> 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 http://sorgalla.com/jcarousel/
Solution 4 - Jquery
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.
Solution 5 - Jquery
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.
Solution 6 - Jquery
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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
Solution 7 - Jquery
try this.....it work in mine.... code:
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
<div class="item">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Solution 8 - Jquery
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);
}
});
});
Solution 9 - Jquery
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...
- slick-carousel/1.9.0/slick.min.css - 1,369 bytes (4 KB on disk)
- slick-carousel/1.9.0/slick.min.js - 43,881 bytes (45 KB on disk)
Some scenarios you may be faced with...
- Unfortunately if you are just pulling distributed Bootstrap 3 or 4
jsandcssminified 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.jsandcarousel.scssvendors to reduce the final compiled sizes of yourcssandjsfiles. Excluding all unused Bootstrapjsandscssvendors 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: trueorfalseto handle responsive breakpoint direction - Set how many slides (columns) you wish to show or scroll (define for each breakpoint)
- Vertical and horizontal carousels
.onevents for everything- Loads of options
Bootstrap 3 multi column slick carousel example
See codepen links below to test examples responsively...
- codepen.io/joshmoto/pen/GRNEBXo -
scssexample with Bootstrap 3 style arrows and dots - codepen.io/joshmoto/pen/RwogBJP - 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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 3 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header" style="float:left!important;">
<a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
</div>
<div class="navbar-text pull-right" style="margin:15px!important;">
<a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</div>
</nav>
</header>
<main>
<div class="container">
<div id="slick">
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">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 class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>
Bootstrap 4 multi column slick carousel example
See codepen links below to test example responsively...
- codepen.io/joshmoto/pen/XWNgYYR -
scssexample with Bootstrap 4 style arrows and dots - codepen.io/joshmoto/pen/MWboBVQ - 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 4 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
<a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</nav>
</header>
<main class="py-4">
<div class="container">
<div id="slick">
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>
Solution 10 - Jquery
$('#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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/300x200?text=1">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=2">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=3">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=4">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=5">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=6">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=7">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>
Solution 11 - Jquery
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: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
To make the script work, you have to add a new <div> wrapper with the class .item-content
directly into your .item <div>. Example:
<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-content">
First page
</div>
</div>
<div class="item active">
<div class="item-content">
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.
Solution 12 - Jquery
Try this code
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>
Solution 13 - Jquery
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 developer Bootstrap 5 Carousel Multiple Items Increment By 1
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;
}
}
Solution 14 - Jquery
I've seen your question and answers, and made a new responsive and flexible multi items carousel Gist. you can see it here:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
Solution 15 - Jquery
-
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 data-ride="carousel" class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel" class=""></li>
<li data-slide-to="2" data-target="#myCarousel" class="active"></li>
<li data-slide-to="3" data-target="#myCarousel" class=""></li>
<li data-slide-to="4" data-target="#myCarousel" class=""></li>
<li data-slide-to="5" data-target="#myCarousel" class=""></li>
<li data-slide-to="6" data-target="#myCarousel" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/carousel/11.jpg"
class="first-slide">
</div>
<div class="item">
<img alt="Second slide" src="images/carousel/22.jpg"
class="second-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/33.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/44.jpeg"
class="fourth-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/55.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/66.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/77.jpg"
class="third-slide">
</div>
</div>
<a data-slide="prev" role="button" href="#myCarousel"
class="left carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-left"></span> <span
class="sr-only">Previous</span>
</a> <a data-slide="next" role="button" href="#myCarousel"
class="right carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-right"></span> <span
class="sr-only">Next</span>
</a>
</div>
Solution 16 - Jquery
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:- https://www.codeply.com/go/eWUbGlspqU
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>