Swiper中文论坛

标题: 基于Swiper2的fade切换效果 [打印本页]
作者: xiaolu289    时间: 2018-6-29 15:05
标题: 基于Swiper2的fade切换效果
本帖最后由 xiaolu289 于 2018-7-2 09:52 编辑

基于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





fade.zip

2.26 MB, 下载次数: 45
作者: loveagle    时间: 2018-8-22 11:04
赞！已收藏
作者: JoyEcho    时间: 2019-3-27 09:02
不兼容ie9有解决方法吗
作者: JoyEcho    时间: 2019-3-27 18:23
JoyEcho 发表于 2019-3-27 09:02
不兼容ie9有解决方法吗

终于搞好了，其实很简单，完美实现swiper2 的fade切换效果，兼容性极好   
<script>
  var mySwiper = new Swiper('.swiper-container',{
        speed:0,
  })
  </script>
<style>
.swiper-slide{ opacity:0; transition:2s; -transition:2s;}
.swiper-slide-active{ opacity:1;}
</style>



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2