查看: 6440|回复: 4
打印 上一主题 下一主题

发现swiper3的fade效果有个bug(含个人解决方法)

[复制链接]

该用户从未签到

1

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
跳转到指定楼层
楼主
发表于 2017-5-22 12:16:23 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式
设置swiper的effect为'fade',切换时初始状态为第一个 swiper-slide透明度为1,其他为0,但切换到第二个时,第一个和第二个透明度都为1,按理说这时候第一个透明度应该为0才对。
这样导致的问题就是,如果切换的内容为一样位置大小的图片还好,是文字时,由于第一第二个swiper-slide透明度都为1,两者文字会叠加在一起出现,继续往第三个切换就是三段文字叠一起……

个人目前的解决方案是在切换结束的回调函数里循环重置所有swiper-slide的opacity为0,再设置当前的透明度为1,希望官方尽快解决这个bug
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

1

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
沙发
 楼主| 发表于 2017-5-22 16:47:10 | 显示全部楼层
发现这样做在回调函数执行之前仍然有一瞬间会有叠字情况,不是个完美的解决方案,又摸索了下,实现了另一种,就是利用!important的优先级来实现,css里添加
.swiper-container-fade .swiper-slide{opacity:0!important;}
.swiper-container-fade .swiper-slide-active{opacity:1!important;}

在需要用fade并且有文字切换的container里添加类名swiper-container-fade
回复 支持 1 反对 0

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-5-8 01:49 , Processed in 0.064880 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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