NG repeat with smooth js carousel

Question

I am new to angularjs and it is difficult for me to work with ng-repeat for js plugins like https://github.com/vasyabigi/angular-slick and some other js modules (banner ...)

<slick class="slider lazy"> <div ng-repeat="slide in slides"><div class="image"><img data-lazy="http://vasyabigi.imtqy.com/angular-slick/images/lazyfonz2.png"/></div></div> </slick <slick class="slider lazy"> <div><div class="image"><img data-lazy="..."/></div></div> <div><div class="image"><img data-lazy="..."/></div></div>... >> without ng-repeat, it works </slick 

There may not be enough time to wait for all images to complete before slickJs takes action.

The directive has $ timeout ( https://github.com/vasyabigi/angular-slick/blob/master/dist/slick.js ).

Answer 1

It seems that work is no problem.

Plunger Demo

Maybe you can show the code in your src and not the result?

HTML:

 <slick autoplay="true" autoplaySpeed="500" fade="true"> <div ng-repeat="image in images"> <img data-lazy="{{image}}"> </div> </slick> 

controller:

 var app = angular.module('demo',['slick']); app.controller('Ctrl', function($scope) { $scope.images = [ "http://vasyabigi.imtqy.com/angular-slick/images/lazyfonz1.png", "http://vasyabigi.imtqy.com/angular-slick/images/lazyfonz2.png", "http://vasyabigi.imtqy.com/angular-slick/images/lazyfonz3.png", ]; }); 

Answer 2

You can add init-onload = true and data = (urDataArray):

HTML:

 <slick autoplay="true" autoplaySpeed="500" fade="true" init-onload=true data="slides"> <div ng-repeat="slide in slides"><img data-lazy="..."/></div> </slick> 

Source: https://github.com/vasyabigi/angular-slick/issues/2

Plunker: http://plnkr.co/edit/fakN9jW5h1ssWaiWaHeN?p=preview