角型マルチカルーセル

Question

角型カルーセルを作ろうとしていましたが、現在は固まっています。 私は角度の初心者ですので、ng-repeatも正しく動作しません。ブック[$インデックス+1]はどのように1を約行くと
をは* .img - それは "レンダリング" することはできませんので

<div id="slides_control"> 
<div> 
    <carousel interval="3000"> 
    <slide ng-repeat="book in bookslider" active="book.active"> 
     <div class="col-md-3"><img ng-src="{{book.img}}"></div> 
     <div class="col-md-3"><img ng-src="{{book[$index +1].img}}"></div> 
     <div class="col-md-3"><img ng-src="{{book[$index +2].img}}"></div> 
     <div class="col-md-3"><img ng-src="{{book[$index +3].img}}"></div> 
     <div class="carousel-caption"> 
     <h4>Slide {{$index+1}}</h4> 
     </div> 
    </slide> 
    </carousel> 
</div> 

$scope.bookslider = [ 

    { 

     img: "images/headerslider/5.jpg" 
    }, 
    { 

     img: "images/headerslider/4.jpg" 
    }, 
    { 

     img: "images/headerslider/2.jpg" 
    }, 
    { 
     img: "images/headerslider/3.jpg" 
    } 
]; 

この表示のみ最初の画像：私がしてきたこと

この状況の次の索引項目を取得していますか？

の作業plunk：http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08

Answer 1

私はあなたが提供し、私は下にあなたの条件をスタンドplunkerを経て。あなたが作った間違いは、booksliderオブジェクトをループする場所だと思います。実際にbookslider配列の個々のオブジェクトであるbookオブジェクトをループする代わりに、booksliderオブジェクトをループする必要があります。

このようにカルーセルオブジェクトを変更するだけで問題を解決できます。

<carousel interval="3000"> 
    <slide ng-repeat="book in bookslider track by $index" active="book.active"> 
     <div class="col-md-3"><img ng-src="{{bookslider[($index) %4 ].img}}" style="width=100px"></div> 
     <div class="col-md-3"><img ng-src="{{bookslider[($index+1) % 4].img}}"></div> 
     <div class="col-md-3"><img ng-src="{{bookslider[($index+2) % 4].img}}"></div> 
     <div class="col-md-3"><img ng-src="{{bookslider[($index+3) % 4].img}}"></div> 
     <div class="carousel-caption"> 
      <h4>Slide {{$index+1}}</h4> 
     </div> 
    </slide> 
</carousel> 

私は作業中のプランナーhereを付けました。