Bootstrap-4 Mehrere Elemente Karussell (mehrere Karussell-Elemente auf einmal angezeigt)

Wie setzen Sie ein mehrere Elemente Karussell in der Bootstrap-4? Die Dokumente erwähnen, die über mehrere Karussells, aber nicht ein Karussell mit mehreren Elementen.

Was bedeutet "mehrere Elemente Karussell"?
mehrere Elemente Karussell bedeutet, es gibt mehrere Karussell-Elemente auf einmal angezeigt.
Wie würde das funktionieren? Den Elementen navigieren Sie als Gruppe oder einzeln?
Sie müssen code hinzufügen, @SemanticUI ohne code kann Man nicht eine richtige Antwort .
Elemente navigieren einzigartig

InformationsquelleAutor SemanticUI | 2016-11-03

13

Können Sie die Anzeige einer Karussell-Element in einer Zeit, sondern füllen Sie es mit mehreren Elementen. So etwas wie:
```
.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}
```
Aber man kann sich dann wünschen, dass Sie weiterkommen konnte Sie ein zu einer Zeit. Das wird nicht passieren mit der bootstrap direkt aus der box. Nach der Implementierung viele Karussells, würde ich empfehlen, Suche nach einem anderen Karussell-Bibliothek bei der Bootstrap ist nicht die Rechnung passen. Slick.js ist mein go-to-lib für viele Karussell-config-Optionen. Und das ist eine ziemlich schlanke ~5k min würde und Gzip.

Wenn Sie hart-auf mit bootstrap, hier ist ein Skript, das können single Voraus, multi-Elemente: http://codepen.io/MarkitDigital/pen/ZpEByz

Warum slick.js keine Leerzeichen einfügen, zwischen Karussell-Elemente, wenn die Elemente größer als 3 ist?
Es hat Standard-styling-Regeln wie bootstrap. Diese können geändert werden, aber notwendig. Wenn Sie fügen Sie die Polsterung, um Ihre Gegenstände, die Sie sollten immer ein paar Leerzeichen zwischen Ihnen.
Ich habe versucht, hinzufügen Polsterung an den div-und img, aber nicht alle Platz.
Können Sie hissen auf ein codepen Werkzeug, um mit ganz schnell?
Ich werde versuchen zu lernen, codeopen, aber für die ich jetzt bearbeitet slick-Folie und legen Sie es margin: 0px 20px; ist, dass der Ort direkt ändern?

InformationsquelleAutor Eric N
11

2018-Update für die Bootstrap-4

Habe ich dies getan mit dem Bootstrap-4-raster mit getrennten Spalten für jedes Karussell Element. Wenn Sie möchten, um vorab nur ein Element in einer Zeit, das Skript kann so etwas sein, dass Klone, die Folien in jeder carousel item..
```
(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); 
```
Mehrere Elemente:

http://codeply.com/go/WEbiqQvGhy

Mehrere Elemente, bewegen Sie ein zu einer Zeit:

http://codeply.com/go/FrzoIEKCdH (Bootstrap-4 alpha)

http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Reaktionsschnell Weg 3 Elemente, die auf großen (1), 1 Punkt auf kleineren:

http://codeply.com/go/s3I9ivCBYH

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

Dies wäre für das zeigen von 3 items auf einmal. Wie gehen Sie Sie über, wenn Sie wollte mehr Elemente? Wie 6
Wenn Sie sich sorgen über Screenreader oder crawler, hüten Sie sich vor Klonen von items nur für die Anzeige
leider nicht ansprechbar ^^ das Letzte Stück des multi-Element-bootstrap-carousel puzzle
Dies ist das repsonsive version: codeply.com/go/s3I9ivCBYH
das hat sich leider einen merkwürdigen "Folie über die Vorherige Folie" - animation, wenn Sie rückwärts gehen. im Gegensatz zu deiner Lösung, welche die gleiche animation vorwärts und rückwärts.

InformationsquelleAutor Zim

arbeite ich auf bootstrap 4. Dieser code funktioniert für mich

<div class="container">
            <div class="row">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>    
        </div>

Dieser multi-Karussell mit sechs Bild-dia-jedes mal als bulk. Frei, mich zu Fragen 🙂

InformationsquelleAutor Mohamed Abbas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.