swiper4的用法

Posted 2022-03-12 dyy-dida

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