基于Swiper2的fade切换效果

xiaolu289

基于swiper2实现的fade切换插件

开发背景： 因为swiper3并不兼容IE8，而swiper2能够兼容IE8，但是在swiper2下，当时我并没有找到有实现fade效果的插件，因此，就自己动手造了一个，使用非常简单：

1. var mySwiper = new Swiper('.swiper-container',{   
   
2.     fade: true,
   
3. })

复制代码

也可以配合animate插件一起使用，可以看我的案例展示

1. var mySwiper = new Swiper('.swiper-container',{   
   
2.     fade: true,
   
3.     // loop: true,
   
4.     onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
   
5.         swiperAnimateCache(swiper); //隐藏动画元素
   
6.         swiperAnimate(swiper); //初始化完成开始动画
   
7.     },
   
8.     onSlideChangeEnd: function(swiper){
   
9.         swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
   
10.     }
    
11. });

复制代码

github地址：https://github.com/xiaolu289/swiper2.fade