Bootstrap 4 Wiele elementów Karuzela (kilka elementów karuzeli pokazanych jednocześnie)

Question

Jak zaimplementować karuzelę z wieloma przedmiotami w Bootstrap 4? Dokumenty wspominają o wielu karuzelach, ale nie o karuzeli z wieloma przedmiotami.

Answer 1

Możesz wyświetlić jeden element karuzeli na raz, ale wypełnij go wieloma elementami. Coś w rodzaju:

.item 
    .col-xs-4 
    {content} 
    .col-xs-4 
    {content} 
    .col-xs-4 
    {content} 

Ale możesz chcieć, abyś mógł rozwinąć je po jednym na raz. To nie stanie się z bootstrapem zaraz po wyjęciu z pudełka. Po wdrożeniu wielu karuzeli, polecam poszukać innej biblioteki karuzeli, gdy Bootstrap nie pasuje do rachunku. Slick.js to moja ulubiona biblioteka dla wielu opcji konfiguracji karuzeli. A jego dość cienkie ~ 5k min'd i gzipowane.

Jeśli trudno ustawić na użyciu bootstrap, oto skrypt, który może dostarczyć pojedynczą zaliczkę, Multi-pozycje: http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2018 Aktualizacja dla Bootstrap 4

Zrobiłem to za pomocą bootstrap 4 siatki z oddzielnymi kolumnami dla każdej pozycji karuzeli. Jeśli chcesz przejść tylko jeden element naraz, skrypt może być coś takiego, że klony slajdy na każdej pozycji karuzeli ..

(function($) { 
    "use strict"; 

    $('.carousel .carousel-item').each(function(){ 
     var next = $(this).next(); 
     if (!next.length) { 
     next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     if (next.next().length>0) { 
     next.next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 

})(jQuery); 

mulitple przedmiotów
http://codeply.com/go/WEbiqQvGhy

mulitple pozycji, przesuń po jednym na raz:
http://codeply.com/go/FrzoIEKCdH (bootstrap 4a)
http://codeply.com/go/3EQkUOhhZz (bootstrap 4.0.0)

Responsive 3 pozycji na duże (1 na raz), 1 pozycja na mniejsze:
http://codeply.com/go/s3I9ivCBYH

---

zobacz także: https://stackoverflow.com/a/20008623/171456