我正在使用 Slick我的一个旋转木马 AngularJS应用。为此,我创建了如下指令:
myApp.directive('slickSlider',function(){
return {
restrict: 'A',
link: function(scope,element,attrs) {
$(element).slick(scope.$eval(attrs.slickSlider));
}
}
});
这是我在 View 文件中的代码:
<div class="clearfix"
slick-slider="{dots: false, arrows: true, draggable:
false, slidesToShow:3, infinite:false}">
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
</div>
在这种情况下,它工作正常并正确初始化。
但是当我使用 ngRepeat 动态创建幻灯片时, 它没有初始化并一张接一张地显示幻灯片。
这是我使用 ngRepeat 的代码
<div class="clearfix"
slick-slider="{dots: false, arrows: true, draggable:
false, slidesToShow:3, infinite:false}">
<div class="my-slide" ng-repeat="slide in slides">
<a><img ng-src="assets/img/{{slide.img}}"/></a>
</div>
</div>
有什么建议,我该如何解决?
最佳答案
我怀疑 slick 插件可能需要完全渲染 DOM 才能正常工作。
尝试:
myApp.directive('slickSlider',function($timeout){
return {
restrict: 'A',
link: function(scope,element,attrs) {
$timeout(function() {
$(element).slick(scope.$eval(attrs.slickSlider));
});
}
}
});
关于jquery - 使用 Angular JS 的 Slick Carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50802612/