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
        });
    }
};