Băng chuyền nhiều mặt AngularJS

Question

Tôi đang sử dụng băng chuyền Bootstrap UI, nhưng nó chỉ hiển thị một trang trình bày - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
Cách hiển thị hình ảnh theo cách này?

img1 - img2 - img3 
then 
img2 - img3 - img4 
then 
img3 -img4 - img5 
then 
img4 - img5 - img6 
then 
img5 - img6 - img1 

(như trong băng chuyền này http://coolcarousels.frebsite.nl/c/58/)

Answer 1

Bạn có thể sử dụng $ index bên trong ng-repeat để tạo ra hình ảnh bổ sung và thêm hai hình ảnh tiếp theo.

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

<carousel interval="myInterval"> 
    <slide ng-repeat="slide in slides" active="slide.active"> 
    <div class="" style="width:600px;margin:auto;"> 
    <div > 
    <img ng-src="{{slide.image}}" width="200px" style="float:left;"> 
    </div> 
    <div > 
    <img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" > 
    </div> 
    <div > 
    <img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" > 
    </div> 
    </div> 
    </slide> 
</carousel> 

Mã để có được những hình ảnh quay

$scope.getSecondIndex = function(index) 
    { 
    if(index-slides.length>=0) 
     return index-slides.length; 
    else 
     return index; 
    } 

Answer 2

Tôi đang sử dụng ng-repeat và chuyển đổi sang hình ảnh, đây là mã của tôi nhưng không chuyển đổi

<carousel interval="myInterval"> 
    <slide ng-repeat="rc in RequirementConsultanctDetails" active="slide.active"> 

     <div class="" style="width:600px;margin:auto;" ng-show="rc.photo!=null"> 
      <div> 
       <img ng-src="data:image/jpeg;base64,{{rc.photo}}" width="200px" style="float:left;">    
      </div> 
      <div>     
       <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+1)].photo}}" width="200px" style="float:left;">     
      </div> 
      <div>     
       <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+2)].photo}}" width="200px" style="float:left;">     
      </div> 
     </div> 
    </slide> 
</carousel>