AngularJS multi-item carousel

Question

Sto usando il carosello UI Bootstrap, ma visualizza solo una diapositiva - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
Come visualizzare le immagini in questo modo?

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

(come nel carosello questo http://coolcarousels.frebsite.nl/c/58/)

Answer 1

È possibile utilizzare l'indice $ all'interno della ng-repeat per creare immagini aggiuntive e aggiungere le prossime due immagini.

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> 

codice per ottenere le immagini rotanti

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

Answer 2

Sto usando ng-repeat e la conversione di immagini, Ecco il mio codice, ma non la conversione

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