如何在AngularJS中創建圖像旋轉木馬的角柵格

Question

我正在使用兩個插件來實現此目的，但它不能正常工作。這兩個插件是角網格和光滑傳送帶。有沒有人知道一個插件，在一個這兩個？

下面是我使用這兩個插件，它幾乎足夠好，除了傳送帶之間的網格項之間的差距，直到頁面第一次加載後調整窗口大小。任何人都可以得到這個工作沒有任何打嗝？

<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery"> 
    <li data-ng-repeat="story in vm.stories" class="grid"> 

     <!--Carousel--> 
     <slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}"> 
      <div ng-repeat="image in story.images"> 
       <img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle"> 
      </div> 
     </slick> 
    </li> 
</ul> 

Answer 1

能夠通過使用div來得到它的工作。繼承人我有，也使用無限滾動。

<div ng-cloak="" layout="column" layout-fill> 
<md-content id="content-scroller"> 
    <div> 
    <div 
     class="cards-wrap" 
     angular-grid="vm.stories" 
     ag-grid-width="400" 
     ag-gutter-size="20" 
     ag-id="gallery" 
     ag-scroll-container="'#content-scroller'" 
     ag-infinite-scroll="vm.loadMoreStories()" 
     performantScroll="true"> 
     <div class="card" ng-repeat="story in vm.stories"> 
      <slick fade="true" dots="true"> 
       <div ng-repeat="image in story.images"> 
        <img data-lazy="{{ image.filename}}" aria-label="Image"> 
       </div> 
      </slick> 
      <div class="inside"> 
       <h3>{{story.title}}</h3> 
       <div class="description">{{ story.text }}</div> 
      </div> 
     </div> 
    </div> 
    <div class="loading-more-indicator" ng-show="vm.loadingMore"> 
     <md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular> 
    </div> 
     </div> 
</md-content> 
<div> 

Answer 2

你有沒有試過這個真棒carousel。您可以更改視角以將圖像作爲網格。