Bootstrap 4 Nhiều mục Băng chuyền (một số mục băng chuyền được hiển thị cùng một lúc)

Question

Làm thế nào để bạn triển khai băng chuyền nhiều mục trong Bootstrap 4? Các tài liệu đề cập đến nhiều băng chuyền nhưng không đề cập đến một băng chuyền có nhiều mục.

Answer 1

Bạn có thể hiển thị một mục băng chuyền cùng một lúc, nhưng hãy điền vào một phần tử. Một cái gì đó như:

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

Nhưng sau đó bạn có thể mong muốn bạn có thể tiến từng bước một. Điều đó sẽ không xảy ra với bootstrap ngay ra khỏi hộp. Sau khi thực hiện nhiều băng chuyền, tôi khuyên bạn nên tìm kiếm một thư viện băng chuyền khác khi Bootstrap không phù hợp với hóa đơn. Slick.js là thư mục lib của tôi cho rất nhiều tùy chọn cấu hình băng chuyền. Và nó khá mỏng ~ 5k min'd và gzipped.

Nếu bạn đang chăm chỉ thiết về việc sử dụng bootstrap, đây là một kịch bản mà có thể cung cấp trước duy nhất, đa mục: http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2018 Cập nhật cho Bootstrap 4

Tôi đã làm điều này bằng cách sử dụng Bootstrap 4 lưới với các cột riêng biệt cho mỗi mục băng chuyền. Nếu bạn muốn thăng tiến chỉ có một mục tại một thời điểm, các kịch bản có thể được một cái gì đó như thế này mà bắt chước các slide vào từng hạng mục băng chuyền ..

(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); 

mục Mulitple:
http://codeply.com/go/WEbiqQvGhy

mục Mulitple, di chuyển cùng một lúc:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Responsive 3 mục trên lớn (1 tại một thời điểm), 1 mục trên nhỏ hơn:
http://codeply.com/go/s3I9ivCBYH

---

Xem thêm: https://stackoverflow.com/a/20008623/171456