Swiper Smooth Progress使用方法

1.如需使用Swiper Smooth Progress插件首先加载插件的js文件。

<head>
  <script src="js/idangerous.swiper-2.x.min.js"></script>
  <script src="js/idangerous.swiper.progress-1.x.js"></script>
</head>

2.插入相应代码


  var mySwiper = new Swiper('.swiper-container',{
    //设定progress参数为true时启用 Smooth Progress 插件
    progress: true,
    //启用 Smooth Progress 插件后会增加一个回调函数onProgressChange
    onProgressChange: function(swiper) {
    //插件会在每个slide上面增加一个progress属性，同时在swiper也增加一个property属性
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides[i];
        var slideProgress = slide.progress;
        //根据slide的progress属性实现某些效果
      }
      var swiperProgress = swiper.progress
      //根据swiper的progress属性实现某些效果
    }
  });

3.关于progress属性

对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。
对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其他情况平分。例：有6个slide，当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。

这是一个使slide二维旋转的示例。


  var mySwiper = new Swiper('.swiper-container',{
      progress:true,
      onProgressChange: function(swiper){
      //获取每个slide的progress属性，并设定其现在角度以及旋转后角度。
      //例如当前活动slide是0，向左拖动则变成1，进行360度旋转，向右拖动则变成-1，进行-360度旋转。
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          swiper.setTransform(slide,'rotate('+360*progress+'deg)');
        }
      },
      //将动画添加到onSetWrapperTransition回调函数中持续进行。
      onSetWrapperTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], speed);  
        }
      }
  });

下载这个示例，Swiper Smooth Progress基础示例。