如何在 AngularJS 中创建 angular 图像轮播网格

Question

我正在使用两个插件来实现此目的，但效果不佳。这两个插件是 angulargrid 和 slick-carousel。有谁知道一个插件可以将这两种功能合二为一吗？

这是我使用这两个插件的结果，它几乎足够好，除了旋转木马导致网格项目之间的间隙，直到 window 在页面首次加载后调整大小。任何人都可以让它正常工作吗？

<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

你试过这个很棒的 carousel 吗？您可以更改透视图以将图像制作为网格。

Answer 2

能够通过使用 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>