Bootstrap 4 Несколько предметов Карусель (несколько предметов карусели, показанных сразу)

Question

Как вы реализуете карусель нескольких предметов в Bootstrap 4? В документах упоминается несколько каруселей, но не карусель с несколькими предметами.

Answer 1

Вы можете отобразить один элемент карусели за раз, но заполните его несколькими элементами. Что-то вроде:

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

Но вы можете пожелать, чтобы вы могли продвигать их по одному. Это не произойдет с загрузкой прямо из коробки. После внедрения многих каруселей я бы рекомендовал искать другую библиотеку каруселей, когда Bootstrap's не соответствует счету. Slick.js - это мой go-to lib для множества опций конфигурации карусели. И его довольно тонкий ~ 5k min'd и gzipped.

Если вы жестко установить на использовании начальной загрузки, вот скрипт, который может обеспечить единый шаг вперед, мульти-детали: http://codepen.io/MarkitDigital/pen/ZpEByz

Answer 2

2018 года обновление для Bootstrap 4

Я сделал это с помощью Bootstrap 4 с отдельными столбцами для каждого элемента карусели. Если вы хотите продвинуться только один пункт в то время, сценарий может быть что-то вроде этого, что клоны слайдов в каждый пункт карусельного ..

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

Mulitple пунктов:
http://codeply.com/go/WEbiqQvGhy

Mulitple предметы, перемещение по одному за раз:
http://codeply.com/go/FrzoIEKCdH (Бутстрап 4 альфа)
http://codeply.com/go/3EQkUOhhZz (Бутстрап 4.0.0)

Отзывчивый 3 шт на больших (1 за один раз), 1 пункт меньше:
http://codeply.com/go/s3I9ivCBYH

---

Также см: https://stackoverflow.com/a/20008623/171456