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.锚导航