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