Как вы реализуете карусель с несколькими элементами в Bootstrap 4? В документах упоминается несколько каруселей, но не карусель с несколькими элементами.
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
Также см.: fooobar.com/questions/77547/...
Ответ 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>
Эта мультикарусная карусель из шести изображений скользит каждый раз как объемная. Не стесняйтесь спрашивать меня :)