ブートストラップ・カルーセル - 再リミット・リミット

ブートストラップ・カルーセルを備えたウェブサイトがあり、各スライドに4枚の写真が表示されています。ブートストラップ・カルーセル - 再リミット・リミット

<div id="myCarousel" class="carousel slide"> 


    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="row"> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a> 
       </div> 
      </div> 

     </div> 

     <div class="item"> 
     <div class="row"> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a> 
       </div> 
      </div> 

     </div> 

    </div>

anglejsを使用してデータベースから写真を取得したいと思います。アイテムのng-repeatは問題を解決しますが、50枚の写真が得られます。どのように4枚の写真/ 50枚をすべてのスライドに入れることができますか？どんな助け？

出典

2017-06-01 Elio Chamy

最初の項目は、残りの項目である、項目アクティブです。私は単独でアイテムをアクティブにしたり、アイテムだけでng-repeatを使用することはできません。カルーセルがクラッシュします。何か案が？ –

groupByフィルタを使用できます。また、画像にヘルパープロパティ：index: Math.floor(i/4)を追加する必要があります。

angular.module('app', ['angular.filter']) 
 
.controller('MyController', ['$scope', function($scope) { 
 
    $scope.images = []; 
 
    for(var i = 0; i < 50; i++) 
 
     $scope.images.push({url:'url' + i, index: Math.floor(i/4)}); 
 
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="MyController"> 
 
    <div class="carousel-inner"> 
 
     <div class="item" ng-class='{active: $first}' ng-repeat="(key, value) in images | groupBy: 'index'"> 
 
     <div class="row"> 
 
      <div class="col-sm-3" ng-repeat="image in value"> 
 
       {{image.url}} 
 
      </div> 
 
     </div> 
 
     <br/> 
 
     </div>    
 
    </div>    
 
    </div> 
 
</body>

出典

2017-06-01 06:51:16

ブートストラップ・カルーセル - 再リミット・リミット

答えて

関連する問題