swiper4的用法

1.swiper：HTML結構

<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>

　　2.樣式

       .swiper-container{
            margin:0 auto;
            width:100px;
            height:200px;
            overflow: hidden;
            border:1px solid red;
        }
        .swiper-wrapper,.swiper-slide{
            width:100px;
            height:200px;
        }

　　3.水平輪播

var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可選選項，自動滑動
        loop:true
    })

　　4.垂直輪播

    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可選選項，自動滑動
        direction : 'vertical',//控制滾動的方向，水平或垂直
        loop:true
    })

　　5.輪播可視區域展示多個slide項

   var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可選選項，自動滑動
        direction : 'vertical',
        loop:true,
        slidesPerView : 3,//設置slider容器能夠同時顯示的slides數量(carousel模式)
    })

　　

　　6.左右切換，獲取activeIndex的值

var mySwiper = new Swiper('.swiper-container',{
  on: {
    //slideChangeTransitionStart開始切換時告訴我現在是第幾個slide


    slideChangeTransitionEnd: function(){
      alert(this.activeIndex);//切換結束時，告訴我現在是第幾個slide
    },
  },
})

　　7.分頁1/3展示效果

var mySwiper = new Swiper('.swiper-container',{
    pagination: {
       el: '.swiper-pagination',
       type:'fraction',
       //type: 'bullets',圓點默認
       //type: 'fraction',分頁
       //type : 'progressbar',進度條
       //type : 'custom',自定義
     },

})

　　8.延遲加載圖片

　　9.滾動條

　　10.縮略圖

　　11.錨導航