How to create an angular grid of image carousels in AngularJS

Question

I'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?

Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?

<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

Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.

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