前端外掛之-swiper
阿新 • • 發佈:2019-01-10
swiper.min.css jquery.min.js swiper.jquery.min.js <div class="swiper-container">--首先定義一個容器 <div class="swiper-wrapper"> <div class="swiper-slide"><img src="" /></div> --新增圖片 <div class="swiper-slide"><img src="" /></div> <div class="swiper-slide"><img src="" /></div> </div> <div class="swiper-pagination"></div>--小圓點分頁器 <div class="swiper-button-prev"></div>--上一頁 <div class="swiper-button-next"></div>--下一頁 </div> var mySwiper = new Swiper(".swiper-container",{ autoplay:1000,--每秒中輪播一次 loop:true,--可以讓圖片迴圈輪播 autoplayDisableOnInteraction:false,--在點選之後可以繼續實現輪播 pagination:".swiper-pagination",--讓小圓點顯示 paginationClickable:true,--實現小圓點點選 prevButton:".swiper-button-prev",--實現上一頁的點選 nextButton:".swiper-button-next",--實現下一頁的點選
effect:”flip”–可以實現3D效果的輪播
pagination: ‘.swiper-pagination’,
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true,//修改swiper的父元素時,自動初始化swiper
})
以及4個回撥函式:
1.onTouchStart 2.onTouchMove 3.onTouchEnd 4.onSlideSwitch。