web-dev-qa-db-ja.com

AngularJSマルチアイテムカルーセル

UI Bootstrapカルーセルを使用していますが、スライドは1つしか表示されません http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview 。
この方法で画像を表示するにはどうすればよいですか？

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

（このカルーセルのように http://coolcarousels.frebsite.nl/c/58/ ）

javascriptangularjstwitter-bootstrapcarousel
11
Belle

Ng-repeat内の$ indexを使用して、追加の画像を作成し、次の2つの画像を追加できます。

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>

回転画像を取得するためのコード

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

Ng-repeatを使用して画像に変換しています。これが私のコードですが、変換していません

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