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基础示例