twitter-bootstrap - カルーセルで一度に 2 つのスライドを表示できますか?

Question

Angular.js について学び始めたばかりで、Angular-ui でカルーセル コントロールを使用しています。1 枚ではなく 2 枚のスライドを同時に表示することはできますか?

このような画像を表示したい -

< image 1 image 2 >
then
< image 3 image 4 >
then
< image 5 image 6 >

ここにサンプルがあります -

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

Answer 1

代わりに、画像をグループ化したり、グループ化された画像を重ねたりすることができます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);