I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions before the first slide reappears.
Removing the first carousel resolved the issue.
I experimented with adding a div id before the class declaration to address the stacked image problem, but it did not resolve the sliding issue.
$('#multi-carousel').on('slide.bs.carousel', function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 5;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
} else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});/*
code by Iatek LLC 2018 - CC 2.0 License - Attribution required
code customized by Azmind.com
*/
// CSS code here
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// HTML code here
</div>After exploring various multi-item carousel options, none seem to provide the desired functionality. The code mentioned above was the closest to achieving the desired outcome.
Desired Result:
Current Result: