Bootstrap 4 Karussell mehrere Frames auf einmal und Schlitten durch ein

Question

Eine andere Frage wurde auf der gleichen Notwendigkeit gefragt (that question) für Bootstrap-3, aber die vorgeschlagenen Lösungen funktionieren nicht mit Bootstrap 4.

Das Bild dieses Beitrags erklärt sehr gut was ich will.

Und noch mehr this bootply.

Wie kann ich dies mit Bootstrap 4 erreichen?

Answer 1

$('#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")); 
 
    });

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

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

Answer 2

-Update 2017

Werfen Sie einen Blick auf die Bootstrap 4 docs, und das Markup ändern 4 bis Bootstrap:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta Optionen: https://stackoverflow.com/a/20008623/171456