swiper

swiper 官网

1 使用方法

引入js（可与jQuery.js同时使用）与css文件

html写法：

   

       

Slide 1

       

Slide 2

       

Slide 3

   

   

   

   

   

   

   

   

js控制属性（初始化）

在页面加载完成后使用

var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical', // 垂直切换选项

    loop: true, // 循环模式选项

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

      scrollbar: {

      el: '.swiper-scrollbar',

    },

  });

2 基本常用属性

slidesPerView:每次显示n个slide

slidesPerGroup：每次切换n个slide

spaceBetween:slide之间的间距

width:宽度，height:高度

autoHeight:高度是否跟随外部container及wrapper变化，默认为false

speed:切换速度

autoPlay:是否自动切换，默认为false

delay:延迟时间（延迟（等待）n s后切换到下一个slide）

loop:是否循环，默认为false

direction:方向，默认为horizontal（横向），可选"vertical"竖向

3 常用功能及组件

  pagination:分页器

     种类：bullets（圆点，默认）fraction (分式 )、progressbar (进度条,默认在顶部)、custom （自定义）；

  scrollbar：滚动条

  

 

      scrollbar: {   el: '.swiper-scrollbar',   },

  lazyLoading:图片懒加载 ，

    图片增加class = "swiper-lazy",src改为data-src

     lazy: {

      loadPrevNext: true,

   },

 navigation:前进与后退按钮

  

 

    navigation: {

       nextEl: '.swiper-button-next',

       prevEl: '.swiper-button-prev',

    },

noSwiping:禁止滑动

  

slider2

   var mySwiper = new Swiper('.swiper-container',{

     noSwiping : true,

  });

touchStartPreventDefault:阻止touchStart('mousedown')默认事件

touchMoveStopPropagation：阻止touchmove冒泡事件

2019.04.23更新

偶尔会遇到这样的问题，各swiper-slide边上会有一点缝隙，原因是swiper-container及swiper-wrapper的宽度略大于swiper-slide,这是由于swiper-slide的宽度一般会取整，而上面二者不会；
若是设定了slidesPerView值大于1 ，可添加属性roundLengths : false,这样宽度便不会取整；
有时候并未设置slidesPerView,还是会这样，此时需将swiper-container宽度略增加或减少一点即可（设置padding-right值，因为swiper-slide默认贴合swiper-wrapper左侧或直接设置宽度）