swiper輪播插件的使用

引入js文件

<script src="./js/swiper-3.4.2.min.js"></script>

接收后臺返回的輪播數據，循環append進去，在append之后new swiper對象

$.each(data['data'],function(i){list_item += '<div class="swiper-slide">';list_item += '<img src="./img/turn_logo.jpg" data-lazyload="'+data['data'][i]['FileUrl']+'" onload="lazyload(this)" alt="">';list_item += '</div>';}) $(".swiper-wrapper").append(list_item);}var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',paginationClickable :true,effect: 'cube',grabCursor: true,cube: {shadow: false,slideShadows: false,shadowOffset: 0,shadowScale: 0}});

備注1.

---

對于插件的使用是很簡單的，大神請繞道 ?

總結

以上是生活随笔為你收集整理的swiper轮播插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。