Как зациклить загрузочную карусель? Пустые поля после последнего слайда - PullRequest
Новая
       28

Как зациклить загрузочную карусель? Пустые поля после последнего слайда

0 голосов
/ 11 января 2019

Как отремонтировать загрузочную карусель? У меня есть 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);
...