twitter-bootstrap 可以在轮播中一次显示两张幻灯片吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15935389/
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
Possible to show two slides in the carousel at a time?
提问by tempid
I just started learning about Angular.js and I'm using the Carousel control in Angular-ui. Is it possible to display two slides at the same time instead of one?
我刚刚开始学习 Angular.js，我正在使用 Angular-ui 中的 Carousel 控件。是否可以同时显示两张幻灯片而不是一张？
I want to display the images like these -
我想显示这样的图像 -
< image 1 image 2 >
then
< image 3 image 4 >
then
< image 5 image 6 >
Here's a sample -
这是一个示例 -
回答by Langdon
You can group the images together and ng-repeatover those grouped images instead. Aside from some needed styling fixes, here's how:
您可以将图像组合在一起并ng-repeat覆盖这些组合图像。除了一些需要的样式修复之外，还有以下方法：
http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview
http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview
HTML:
HTML：
<carousel interval="myInterval">
<slide ng-repeat="slideCollection in groupedSlides" active="slide.active">
<div>
<img ng-src="{{slideCollection.image1.image}}" style="margin:auto;">
<img ng-src="{{slideCollection.image2.image}}" style="margin:auto;">
</div>
</slide>
</carousel>
JavaScript:
JavaScript：
$scope.$watch('slides', function(values) {
var i, a = [], b;
for (i = 0; i < $scope.slides.length; i += 2) {
b = { image1: $scope.slides[i] };
if ($scope.slides[i + 1]) {
b.image2 = $scope.slides[i + 1];
}
a.push(b);
}
$scope.groupedSlides = a;
}, true);
