1. 程式人生 > >前端外掛之-swiper

前端外掛之-swiper

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。