amazeUI——JS插件slider使用注意事项

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="width: 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>&times;</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
        });
    }
};