Swiper-輪播圖

Swiper（移動端觸摸滑動插件）

輪播圖

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in bannerList"></div>
    </div>            
    <div class="swiper-pagination"></div><!-- 分頁器 -->
</div>

mounted: function(){
    //查詢廣告輪播圖列表
    this.$common.httpPost('queryMerBannerList.do',{Channel:'G'},data => {
        var bannerList=data.BannerList;
        this.bannerList=bannerList;    
        if(bannerList.length>0){
            //定時器是爲了解決分液器bug(請求須要時間返回列表)
            setTimeout(function(){
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    observer:true,//當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper
                    observeParents:true,//將observe應用於Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新
                    autoplay:2000,
                    loop:true,
                    autoplayDisableOnInteraction:false//用戶操做swiper以後，是否禁止autoplay
               });
            },100);
        }    
    });
}