swiper套路

swiper插件 quick start

基本結構

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>
    //初始化
    <script> 
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000,//可選選項，自動滑動
    })
    </script>

通常選項

<script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
    initialSlide :2,//設置圖片張數
    direction : 'vertical',//滑動方向
    autoplay : 3000,//輪播時間，默認爲true
    speed:300,//每張圖滑動的速度
    autoplayDisableOnInteraction : false,//默認爲true，用戶操做以後，輪播自動中止，操做包括觸碰，點擊（分頁器），拖動
    autoplayStopOnLast : true,//loop模式下無效，若是爲true，切換到最後一張時自動中止，若是爲false，切換到最後一張會自動回到第一張
    grabCursor : true, //鼠標進入窗口會變手型，點擊會變握拳
    loop : true, // 先後各加一張圖，無縫輪播
    zoom : true,// 點擊放大，須要在slide中添加類名swiper-zoom-container，<div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image"> </div> </div>
    zoomMax :5, //容許最大倍率
    zoomMin :2, //容許最小倍率
    })
    /*若是隻有一個slide就鎖住swiper
    if(mySwiper.slides.length<=3){
    mySwiper.lockSwipes();
    }*/
    </script>

方法

<script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
    onTap: function(swiper){
          alert('你tap了Swiper');
        }
    })
</script>