swiper4的用法

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

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

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

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

   var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
        direction : 'vertical',
        loop:true,
        slidesPerView : 3,//设置slider容器能够同时显示的slides数量(carousel模式)
    })

var mySwiper = new Swiper('.swiper-container',{
  on: {
    //slideChangeTransitionStart开始切换时告诉我现在是第几个slide


    slideChangeTransitionEnd: function(){
      alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
    },
  },
})

var mySwiper = new Swiper('.swiper-container',{
    pagination: {
       el: '.swiper-pagination',
       type:'fraction',
       //type: 'bullets',圆点默认
       //type: 'fraction',分页
       //type : 'progressbar',进度条
       //type : 'custom',自定义
     },

})