I recently implemented a carousel that showcases 3 items at a time and advances by one.
After clicking the next button, I noticed that the 2nd and 3rd items disappear momentarily before reappearing. This animation glitch is not smooth, and I would like all items to transition seamlessly. Additionally, when the 6th item (6th card) reaches the leftmost position, there is a blank space where card 1 should be located, causing a visual inconsistency in the carousel layout.
This project was created for my school assignment, and since I'm new to Bootstrap, I believe there are some missing CSS properties affecting the carousel's behavior. I initially copied code from this source but encountered issues with directly pasting it, leading me to make modifications in the CSS file.
$(document).ready(function() {
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
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($(this).find(".carousel-inner"));
}
}
}
});
});.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;
margin-right: initial;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<div class="carousel-item col-md-4 active">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
...
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>