1

我正在使用两个插件来实现这一点，但它不能完美地工作。这两个插件是 angulargrid 和 slick-carousel。有谁知道一个插件可以同时做到这两个？

这是我使用这两个插件时所拥有的，它几乎足够好，除了轮播会导致网格项目之间的间隙，直到页面首次加载后调整窗口大小。任何人都可以在没有任何问题的情况下让它工作吗？

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

2 回答 2

0

你试过这个很棒的旋转木马吗 ？您可以更改透视以使图像成为网格。

于 2016-06-07T23:19:06.937 回答
0

能够通过使用 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>
于 2016-06-08T21:05:09.703 回答