Swiper中文论坛

标题: 发现swiper3的fade效果有个bug（含个人解决方法） [打印本页]

作者: 骑着蜗牛赛跑 时间: 2017-5-22 12:16
标题: 发现swiper3的fade效果有个bug（含个人解决方法）
设置swiper的effect为'fade'，切换时初始状态为第一个 swiper-slide透明度为1，其他为0，但切换到第二个时，第一个和第二个透明度都为1，按理说这时候第一个透明度应该为0才对。
这样导致的问题就是，如果切换的内容为一样位置大小的图片还好，是文字时，由于第一第二个swiper-slide透明度都为1，两者文字会叠加在一起出现，继续往第三个切换就是三段文字叠一起……

个人目前的解决方案是在切换结束的回调函数里循环重置所有swiper-slide的opacity为0，再设置当前的透明度为1，希望官方尽快解决这个bug

作者: 骑着蜗牛赛跑 时间: 2017-5-22 16:47
发现这样做在回调函数执行之前仍然有一瞬间会有叠字情况，不是个完美的解决方案，又摸索了下，实现了另一种，就是利用!important的优先级来实现，css里添加
.swiper-container-fade .swiper-slide{opacity:0!important;}
.swiper-container-fade .swiper-slide-active{opacity:1!important;}

在需要用fade并且有文字切换的container里添加类名swiper-container-fade

作者: 东张西旺 时间: 2018-9-11 16:33
asdhhsuasg

作者: ming666 时间: 2022-3-13 22:41

骑着蜗牛赛跑发表于 2017-5-22 16:47
发现这样做在回调函数执行之前仍然有一瞬间会有叠字情况，不是个完美的解决方案，又摸索了下，实现了另一种 ...

不错，问题解决了

作者: tangelang 时间: 2022-7-26 11:57
牛啊牛啊

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)