amazeUI官网:http://amazeui.shopxo.net/javascript/slider/
我的问题: 轮播图放在模态框里的,一开始不显示但初始化了slider,点击时显示轮播图,但是最初几秒没图,要过几秒才会有图。
html:
<div class="am-modal am-modal-no-btn" tabindex="-1" id="modal_img" style="border-radius: 5px;"> <div class="am-modal-dialog am-panel am-panel-default" style=" 50%;max-height:90%; border-radius: 10px; overflow-x: hidden;"> <div class="am-panel-hd myPasTitle" style="color: #bd471e;"> 轮播图<a href="javascript: void(0)" class="am-close am-close-spin" style="float: right;" data-am-modal-close>×</a> </div> <div ng-if="imgsList.length>0" class="am-slider am-slider-default" data-am-flexslider style="padding: .7rem;"> <ul class="am-slides"> <li ng-repeat="path in imgsList">
<img ng-src="{{path == ''||path == null?'':path}}" />
</li> </ul> </div> </div> </div>
<script>
$('.am-slider').flexslider({
slideshow: false //是否自动播放
});
</script>
js:
$scope.open_img = function(){ //点击打开模态框 $("#modal_img").modal(); };
解决方法: 将轮播图初始化放在模态框显示后。
$scope.open_imgclick = function(){ $("#modal_img").modal(); if($scope.imgsList.length>0){ $('.am-slider').flexslider({ slideshow: false }); } };