查看: 2897|回复: 4

基于Swiper2的fade切换效果

[复制链接]

该用户从未签到

1

主题

3

帖子

273

积分

中级会员

Rank: 3Rank: 3

积分
273
发表于 2018-6-29 15:05:30 | 显示全部楼层 |阅读模式
本帖最后由 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

评分

参与人数 1金钱 +200 收起 理由
admin + 200

查看全部评分

回复

使用道具 举报

  • TA的每日心情
    开心
    2018-8-22 10:33
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    1

    主题

    17

    帖子

    39

    积分

    新手上路

    Rank: 1

    积分
    39
    发表于 2018-8-22 11:04:57 | 显示全部楼层
    赞!已收藏
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    9

    积分

    新手上路

    Rank: 1

    积分
    9
    发表于 2019-3-27 09:02:44 | 显示全部楼层
    不兼容ie9有解决方法吗
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    9

    积分

    新手上路

    Rank: 1

    积分
    9
    发表于 2019-3-27 18:23:51 | 显示全部楼层
    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>
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2022-1-26 16:35 , Processed in 0.115764 second(s), 34 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表