1. 程式人生 > >swiper3 ajax獲取後臺資料渲染實現輪播效果

swiper3 ajax獲取後臺資料渲染實現輪播效果

1.呼叫介面獲取需要渲染的資料,根據返回的介面資料,渲染節點,緊接著在插入節點的後邊呼叫步驟2編寫的初始化方法

                // 將資料加入節點後,插入父節點中
                $('#swiper_demo').html(html);
                // 動態載入完節點後,初始化輪播外掛
                swiper_init();

2.編寫初始化swiper容器的方法,這是根據我自己專案需求編寫的引數

// 初始化輪播外掛
        function swiper_init(){
            var swiper = new Swiper('#swiper_demo .swiper-container', {
                slidesPerView: 4, // 預設展示四張
                spaceBetween: 42, // 每張圖片的間隙
                slidesPerGroup: 2,// 每次滑動輪播兩張圖片
                loop: true,       // 開啟迴圈
                autoplay:5000,    // 每次滾動的時間間隙
                autoplayDisableOnInteraction:false, // 使用者操作後,繼續迴圈
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next'
            });
            return swiper;
        }