uib-carousel 从一组图像中的一张幻灯片中的两个图像

【问题标题】：uib-carousel two images in one slide from an array of imagesuib-carousel 从一组图像中的一张幻灯片中的两个图像
【发布时间】：2016-05-07 09:56:20
【问题描述】：

我有一组图像。一张幻灯片上的一个图像工作正常，但是，我想在一张幻灯片上显示两张图片这是我的笨蛋 http://plnkr.co/edit/2GRRijUJDzuHNnHbr2U2?p=preview

这是我对每张幻灯片一张图片的标记

<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </uib-slide>
</uib-carousel>

【问题讨论】：

您需要遍历 pair 图像列表还是 2 x 2 遍历图像列表？
是的，我需要为每张幻灯片迭代 2 张图片，感谢您的回答

标签： angularjs angular-ui-bootstrap

【解决方案1】：

如果您需要迭代一对图像，您可以这样做：

http://plnkr.co/edit/URRvZUwohYOSsypVSd8I?p=preview

我更改了addSlide 函数：

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image1: 'http://lorempixel.com/' + newWidth + '/300',
      image2: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

还有<uid-slide> 模板

  <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <div>
      <img ng-src="{{slide.image1}}" style="width:50%;display:inline-block">
      <img ng-src="{{slide.image2}}" style="width:50%;display:inline-block">
    </div>
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </uib-slide>

【讨论】：