Bootstrap 4 Carousel Nhiều khung hình cùng một lúc và trượt bởi một

Question

câu hỏi khác được hỏi về sự cần thiết cùng (that question) cho bootstrap 3 nhưng các giải pháp đề xuất không làm việc với Bootstrap 4.

Hình ảnh của bài viết này giải thích rất tốt những gì tôi muốn.

Và thậm chí nhiều hơn this bootply.

Làm thế nào tôi có thể đạt được điều này với Bootstrap 4?

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

Hãy nhìn vào các Bootstrap 4 docs, và thay đổi đánh dấu để Bootstrap 4:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta lựa chọn: https://stackoverflow.com/a/20008623/171456