Comment créer une grille angulaire de carrousels d'images dans AngularJS

Question

J'utilise deux plugins pour y parvenir mais cela ne fonctionne pas parfaitement. Les deux plugins sont angulargrid, et slick-carrousel. Est-ce que quelqu'un sait d'un plugin qui fait les deux en un?

Voici ce que j'ai à faire avec les deux plugins, c'est presque suffisant, sauf que le carrousel provoque des espaces entre les éléments de la grille jusqu'à ce que la fenêtre soit redimensionnée après le chargement initial de la page. Quelqu'un peut-il faire fonctionner cela sans hoquet?

<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

Était en mesure de le faire fonctionner en utilisant divs. Heres ce que j'ai, qui utilise également le défilement infini.

<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

Avez-vous essayé ce génial carousel. Vous pouvez changer la perspective pour faire des images comme une grille.