我刚刚开始学习Angular.js,并且在Angular-ui中使用Carousel控件。是否可以同时显示两个幻灯片而不是一个?
我想显示这些图像-
< image 1 image 2 > then < image 3 image 4 > then < image 5 image 6 >
这是一个示例-
http://plnkr.co/edit/BnErmMDl8nPvXPrw3ULu?p=preview
您可以将图像ng-repeat分组在一起,也可以将其分组。除了一些所需的样式修复之外,以下是方法:
ng-repeat
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);