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

Ответ 1

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

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

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

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

Ответ 2

2019 Обновление для 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); 

Несколько элементов:
http://codeply.com/go/WEbiqQvGhy

Несколько элементов, перемещайте по одному:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

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

Ответ 3

я работаю над загрузкой 4. Этот код работает для меня

<div class="container">
            <div class="row">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>    
        </div>

Эта мультикарусная карусель из шести изображений скользит каждый раз как объемная. Не стесняйтесь спрашивать меня :)