I came across this code snippet that shows how to display multiple items in a carousel simultaneously: https://www.codeply.com/go/YbRfxfTDN1 .
However, my requirement is to show 6 items at once instead of 4. I made adjustments to the Bootstrap grid to have 6 columns and modified the CSS from transform: translateX(25%); to transform: translateX(16.67%);, but it's still not functioning as intended.
I've been experimenting with the jQuery code as well because I believe I need to clone additional items, but I'm facing challenges in making it work.
Is there anyone who can provide assistance?
Note: The number of items will vary as the carousel will be dynamically populated.
$('#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));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
//some code to display 6 items
}
});
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(16.67%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-16.67%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
<div class="container text-center my-3">
<h2>Bootstrap 4 Multiple Item Carousel</h2>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=1">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=2">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=3">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=4">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=5">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=6">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=7">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=8">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=9">
</div>
<div class="carousel-item">
<img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=10">
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" 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="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h4>Advances one slide at a time</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>