可以一次显示在转盘两个幻灯片？ [英] Possible to show two slides in the carousel at a time?

问题描述

我刚开始学习Angular.js，我用角-UI的旋转木马控制。是有可能在同一时间，而不是一个，以显示两个幻灯片？

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=$p$ PVIEW

推荐答案

您可以将图像一起 NG-重复对这些分组的图像来代替。除了一些必要的修复造型，方法如下：

You can group the images together and ng-repeat over those grouped images instead. Aside from some needed styling fixes, here's how:

<一个href=\"http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=$p$pview\">http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=$p$pview

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);

这篇关于可以一次显示在转盘两个幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！