我花了很多时间寻找引导转盘的修改，它可以在一个视图中显示多个项目。而不是一个项目。但是，我发现的所有例子都有一些小问题。我找到的最好的例子就是这个： http://codepen.io/Jazzzper86/pen/BKVzNg。
它在Chrome中运行良好，但在Firefox和Internet Explorer中没有。有没有人知道在所有浏览器中都能正常工作的多项目引导程序轮播的示例？如果没有，什么类型的旋转木马将是一个很好的选择？谢谢！
使用的javascript：
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-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));
}
});
使用的CSS（less）：
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
// non-related styling:
body{
background: #333;
color: #ddd;
}
h1{
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}
HTML
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我找到了https://bootsnipp.com/snippets/zDQkr
在全宽窗口上运行此代码段
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item {width: 190px; float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
</div>
<button class="btn btn-primary leftLst">PREV</button>
<button class="btn btn-primary rightLst">NEXT</button>
</div>
</div>
</div>
pp.com/snippets/zDQkr