Zaloguj się, aby obserwować  
ar4

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

Polecane posty

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

 


DAMTOX.PL - pozycjonowanie stron!

StolicaZdrowia.pl - Portal o zdrowiu

Polecam hosting (bez reflinka) - whosting.pl

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.