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

猜你喜欢

转载自www.cnblogs.com/linjiangxian/p/12123030.html