Jak zapętlić karuzele w bootstrap4? Puste pola po ostatnim slajdzie

[ar4]

Witam,
mam karuzelę składającą się z 6 elementów. Jak szósty element zostanie wyświetlony to każdy następny za nim jest pustym polem. Jak zrobić, aby kopiowało pierwszy element i każdy następny na koniec karuzeli, aby ta działała bez białych przestrzeni.
Mój kod to:

<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> 

 

a mój js to:

(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);