Bootstrap 4 Multi Carousel show 4 images instead of 3
15,043
Since 4 cols, are 25% width (instead of 33%) change the CSS:
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%)
}
Also an additional item needs to be cloned into each slide. So the JS change is:
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
Bootstrap 4.0.0 Demo - 4 slides, advance 1
Note: From alpha 6 (when the original question was asked) to Bootstrap 4.0.0, the active carousel-item changed to flexbox. Therefore, the same must be done for the neighboring items in the multi-carousel.
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
Also see: Bootstrap 4.1.0 (advance all 4 at once)
Related videos on Youtube
Author by
edokko
Updated on June 04, 2022Comments
-
edokko almost 2 years
I can't figure out how to make it show 4 images instead of 3.
Based on this Code: Bootstrap 4 Multiple Item Carousel
Script JS
$('#recipeCarousel').carousel({ interval: 10000 }) $('.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)); } });
CSS
.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(25%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-25%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); }
and I've changed to this code
<div class="carousel-item col-md-3">
instead of this original code
<div class="carousel-item col-md-4">
-
edokko over 6 yearsThank you very much! It's working good, But the photo showing vertical one line. I know if you see on Codeply, it won't show up like that.
-
edokko over 6 yearsI just noticed the original one is using Bootstrap 4 alpha 6, I'm using Beta 2 .... that's why the photo image showing vertical. but where should I change to make horizon instead of vertical