twitter-bootstrap Twitter Bootstrap Carousel 显示两个项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18613271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Carousel display two items
提问by hsz
Right now I have implemented Twitter Bootstrap 3 Carouselwhich displays one item and during transition, shows next element, so it looks like:
现在我已经实现Twitter Bootstrap 3 Carousel了显示一个项目并在转换期间显示下一个元素，所以它看起来像：
[1] /transition/ [2] /transition/ [3] ...
I have to display two items and after transition display second element with third one:
我必须显示两个项目，并在转换后显示第二个元素和第三个元素：
[1][2] /transition/ [2][3] /transition/ [3][4] ...
Is it even possible to achieve ?
甚至有可能实现吗？
I have tried to apply activeclass to the two elements on page load, but Carouseldoes not work anymore. Also using following CSS does not work:
我试图active在页面加载时将类应用于两个元素，但Carousel不再起作用。也使用以下 CSS 不起作用：
.item.active + .item {
display: block !important;
}
采纳答案by hsz
Solution is quite simple.
解决方法很简单。
.itemclass has two sizes of content - lets say 400px. .item-contenthas 200px:
.item类有两种大小的内容 - 比方说400px。.item-content有200px：
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="item-content">ITEM 1</div>
</div>
<div class="item">
<div class="item-content">ITEM 2</div>
</div>
<div class="item">
<div class="item-content">ITEM 3</div>
</div>
<div class="item">
<div class="item-content">ITEM 4</div>
</div>
</div>
</div>
And CSS:
和 CSS：
.carousel .item {
width: 400px;
}
.carousel .item .item-content {
width: 200px;
}
Right now we have to duplicate next items into current one to display two items like [1][2] [2][3] [3][4] [4][1]
现在我们必须将下一个项目复制到当前项目中以显示两个项目，例如 [1][2] [2][3] [3][4] [4][1]
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.find('.item-content:first-child').clone().appendTo($(this));
});
And modify carousel transition with:
并修改轮播过渡：
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next { left: 50%; }
That's all.
就这样。
回答by Michal Vrchota
Hsz's solution worked fine until Twitter Bootstrap 3.3 where was added support for 3D transform which will override your styles for transition (left: 50% and left: -50%)
Hsz 的解决方案在 Twitter Bootstrap 3.3 之前一直运行良好，其中添加了对 3D 转换的支持，这将覆盖您的过渡样式（左：50% 和左：-50%）
Therefore you have to override Twitter Bootstrap default transition styles with following css:
因此，您必须使用以下 css 覆盖 Twitter Bootstrap 默认过渡样式：
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
You may need to change 50% to 33% if you display 3 items etc
如果您显示 3 个项目等，您可能需要将 50% 更改为 33%
回答by Danijel
I know it's bit old but I managed to solve it with,
我知道它有点旧，但我设法解决了它，
#carousel-galleries{
.carousel-inner{
.item{
@media all and (transform-3d), (-webkit-transform-3d) {
@include transition-transform(0.6s ease-in-out);
@include backface-visibility(hidden);
@include perspective(1000);
&.next,
&.active.right {
@include translate3d(25%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
@include translate3d(-25%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
@include translate3d(0, 0, 0);
left: 0;
}
}
}
}
}
This is 4 items advance by 1, bootstrap-sass 3.3.1 with compass
这是 4 个项目提前 1，bootstrap-sass 3.3.1 with compass
回答by nico paholo
The answer above works well but it breaks when there is an odd number of carousel items. I added some jquery to make it work for odd and even
上面的答案效果很好，但是当轮播项目的数量为奇数时它会中断。我添加了一些 jquery 以使其适用于奇数和偶数
if ($(this).siblings(':last')) {
$(this).siblings(':first').find('.item-content:first-child').clone().appendTo($(this));
}
else
{
next.find('.item-content:first-child').clone().appendTo($(this));
}
