Bootstrap 4 Mehrere Artikel Karussell (mehrere Karussell Artikel auf einmal gezeigt)

Question

Wie implementieren Sie ein Multiple-Items-Karussell in Bootstrap 4? Die Dokumente erwähnen mehrere Karussells, aber kein Karussell mit mehreren Artikeln.

Answer 1

Sie können jeweils ein Karussellelement anzeigen, aber mit mehreren Elementen füllen. Etwas wie:

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

Aber Sie können dann wünschen, dass Sie sie einzeln vorrücken konnten. Das wird mit dem Bootstrap nicht sofort passieren. Nachdem ich viele Karussells implementiert habe, würde ich empfehlen, eine andere Karussell-Bibliothek zu suchen, wenn Bootstrap's nicht zur Rechnung passt. Slick.js ist meine Go-to-Lib für viele Karussell-Konfigurationsoptionen. Und es ist ein ziemlich schlank ~ 5k min'd und gezippt.

Wenn Sie hart eingestellt sind Bootstrap auf verwenden, hier ist ein Skript, das einzige Fortschritt, Multieinzelteile liefern können: http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2018 Update für Bootstrap 4

ich dies den Bootstrap mit getan haben 4 Gitter mit separaten Spalten für jedes Karussellelement. Wenn Sie nur ein Element in einer Zeit voranbringen wollen, kann das Skript so etwas wie dies, dass die Folien in jedes Karussell Artikel klont ..

(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 Artikel:
http://codeply.com/go/WEbiqQvGhy

Mulitple Artikel, verschieben einer nach dem anderen:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Responsive 3 Artikel auf großes (1 zu einer Zeit), 1 Punkt auf kleines:
http://codeply.com/go/s3I9ivCBYH

---

Siehe auch: https://stackoverflow.com/a/20008623/171456