Bootstrap-4 Carousel Mehrere Bilder auf einmal und schieben Sie durch eine

Andere Frage auf der gleichen Notwendigkeit (diese Frage) für bootstrap-3, aber die vorgeschlagenen Lösungen funktionieren nicht mit Bootstrap 4.

Dem Bild von diesem post erklärt sehr gut, was ich will.

Und noch mehr diese bootply.

Wie kann ich erreichen, das mit Bootstrap 4 ?

Ich möchte mehrere Schlitten gleichzeitig angezeigt (1, 2 und 3), und wenn ich auf weiter klicken möchte ich die Folie 2 und 3 nach Links bewegt sich ein wenig und die 4 angezeigt wird (während die 1 verschwinden).

InformationsquelleAutor Elie Teyssedou | 2016-02-02

JS:

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".carousel-item.active:nth-child(" + ($(".carousel-inner .carousel-item").length -1) + ") + .carousel-item").insertBefore($(".carousel-item:first-child"));
        $(".carousel-item.active:last-child").insertBefore($(".carousel-item:first-child"));
    });

CSS:

        .carousel-item.active,
        .carousel-item.active + .carousel-item,
        .carousel-item.active + .carousel-item  + .carousel-item {
           width: 33.3%;
           display: block;
           float:left;
        }

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
    <h1>Hello, world!</h1>
<div class="container"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=2">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=3">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=4">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=5">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=6">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=7">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
   
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

Dieser code funktioniert aber auch die "glitchy". Drücken Sie die Taste Links neben Taste.k.ein. "zurück"), und Sie werden sehen wie komisch der laden ist. Gibt es trotzdem kann dies verbessert werden?
vereinbart, es ist langsam und glitchy... neue Folien, die eine Weile dauern zu laden... und schneller Klick macht es noch schlimmer...

InformationsquelleAutor Bass Jobsen

4

Update 2018

Werfen Sie einen Blick auf die Bootstrap-4 docs, und ändern Sie das markup von Bootstrap 4:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta Optionen: https://stackoverflow.com/a/20008623/171456
- Das Ergebnis ist nicht das, was ich will, genau. Der übergang ist nicht das gleiche wie die bootply ich verbunden. Hab ich schon versucht zu ändern das markup.
- Ja, da die BS 4 übergangs-Animationen unterschiedlich sind, müssen Sie möglicherweise ändern Sie die CSS... aber es ist immer noch bewegen eins zu einem Zeitpunkt.
InformationsquelleAutor Zim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.