- 首页
- 其他开发
- Twitter Bootstrap Carousel 显示两个项目
Twitter Bootstrap Carousel 显示两个项目
[英] Twitter Bootstrap Carousel display two items
本文介绍了Twitter Bootstrap Carousel 显示两个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在我已经实现了 Twitter Bootstrap 3 Carousel，它显示一个项目并在转换期间显示下一个元素，所以它看起来像:
[1]/transition/[2]/transition/[3] ...
我必须显示两个项目，并在转换后显示第二个元素和第三个:
[1][2]/transition/[2][3]/transition/[3][4] ...
有可能实现吗?
我尝试在页面加载时将 active 类应用于两个元素，但是 Carousel 不再起作用.使用以下 CSS 也不起作用:
.item.active + .item {显示:阻止！重要；}
解决方案
解决方案很简单.
.item 类有两种尺寸的内容 - 比如说 400px..item-content 有 200px:
<div class="carousel-inner"><div class="item active"><div class="item-content">ITEM 1</div>
<div class="item"><div class="item-content">ITEM 2</div>
<div class="item"><div class="item-content">ITEM 3</div>
<div class="item"><div class="item-content">ITEM 4</div>
和 CSS:
.carousel .item {宽度:400px；}.carousel .item .item-content {宽度:200px；}
现在我们必须将下一个项目复制到当前项目中以显示两个项目，例如 [1][2] [2][3] [3][4] [4][1]
$('.carousel .item').each(function(){var next = $(this).next();如果(！下一个.长度){next = $(this).siblings(':first');}next.find('.item-content:first-child').clone().appendTo($(this));});
并修改轮播过渡:
.carousel-inner .active.left { left: -50%;}.carousel-inner .next { left: 50%;}
仅此而已.
Right now I have implemented Twitter Bootstrap 3 Carousel which displays one item and during transition, shows next element, so it looks like:
[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 active class to the two elements on page load, but Carousel does not work anymore. Also using following CSS does not work:
.item.active + .item {
display: block !important;
}
解决方案
Solution is quite simple.
.item class has two sizes of content - lets say 400px. .item-content has 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:
.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]
$('.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.
这篇关于Twitter Bootstrap Carousel 显示两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
