swiper3 ajax獲取後臺資料渲染實現輪播效果
阿新 • • 發佈:2018-11-09
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; }