Question

我有一系列图像.1张幻灯片上的一张图片工作正常，但是，我想在1张幻灯片上显示两张图片这是我的傻瓜 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>

Answer 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>

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

1 个答案: