可以在轮播中一次显示两张幻灯片吗? [英] Possible to show two slides in the carousel at a time?
问题描述
我刚刚开始学习 Angular.js,我正在使用 Angular-ui 中的 Carousel 控件.是否可以同时显示两张幻灯片而不是一张?
我想显示这样的图像 -
<代码><图像 1 图像 2 >然后<图像 3 图像 4 >然后<图 5 图 6 >
这是一个示例 -
http://plnkr.co/edit/BnErmMDl8nPvXPrw3ULu?p=preview
您可以将图像分组在一起,然后 ng-repeat
代替这些分组图像.除了一些必要的样式修复外,方法如下:
http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview
HTML:
<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;">
</幻灯片></轮播>
JavaScript:
$scope.$watch('slides', function(values) {var i, a = [], b;for (i = 0; i <$scope.slides.length; i += 2) {b = { image1: $scope.slides[i] };如果($scope.slides[i + 1]){b.image2 = $scope.slides[i + 1];}a.推(b);}$scope.groupedSlides = a;}, 真的);
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?
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 -
http://plnkr.co/edit/BnErmMDl8nPvXPrw3ULu?p=preview
You can group the images together and ng-repeat
over those grouped images instead. Aside from some needed styling fixes, here's how:
http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview
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:
$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);
这篇关于可以在轮播中一次显示两张幻灯片吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!