如何循环自举轮播？最后一张幻灯片后的空白字段

Question

如何修复自举轮播？我的滑块上有6个元素。在最后一项之后，不会加载第一个空字段。剩下屏幕上的最后一项时，将全部加载四个。如何使第一个项目在最后一个项目之后立即加载？

<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="5000">
    <div class="carousel-inner row w-100 mx-auto" role="listbox">
        <div class="carousel-item col-md-3 active">
          <a href="Url 1">
            <img class="img-fluid mx-auto d-block w-100" src="Url 1" alt="slide 1">
          </a>
        </div>
        <div class="carousel-item col-md-3">
          <a href="Url 2">
            <img class="img-fluid mx-auto d-block w-100" src="Url 2" alt="slide 2">
          </a>
        </div>
        <div class="carousel-item col-md-3">
          <a href="Url 3">
            <img class="img-fluid mx-auto d-block w-100" src="Url 3" alt="slide 3">
          </a>
        </div>
        <div class="carousel-item col-md-3">
          <a href="Url 4">
            <img class="img-fluid mx-auto d-block w-100" src="Url 4" alt="slide 4">
          </a>
        </div>
        <div class="carousel-item col-md-3">
          <a href="Url 5">
            <img class="img-fluid mx-auto d-block w-100" src="Url 5" alt="slide 5">
          </a>
        </div>
        <div class="carousel-item col-md-3">
          <a href="Url 6">
            <img class="img-fluid mx-auto d-block w-100" src="Url 6" alt="slide 6">
          </a>
        </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> 

我在js中使用的代码是：

(function($) {
    $('#carouselExample').on('slide.bs.carousel', function (e) {

var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
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');
        }
    }
}
});
})(jQuery);

请帮助。

已解决:) 代码js：

(function($) {
$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var $t = $(this);
var $inner = $t.find('.carousel-inner');
var idx = $e.index();
var itemsPerSlide = 4;
var totalItems = $t.find('.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") {
            $t.find('.carousel-item').eq(i).appendTo($inner);
        }
        else {
            $t.find('.carousel-item').eq(0).appendTo($inner);
        }
    }
 }
});
})(jQuery);