swiper轮播插件的使用
生活随笔
收集整理的這篇文章主要介紹了
swiper轮播插件的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
swiper輪播插件的使用
引入js文件
<script src="./js/swiper-3.4.2.min.js"></script>接收后臺返回的輪播數(shù)據(jù),循環(huán)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.
總結(jié)
以上是生活随笔為你收集整理的swiper轮播插件的使用的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: css3动画过渡按钮
- 下一篇: 今天的作业 --- 去重