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

骑着蜗牛赛跑 · 发表于 2017-5-22 12:16:23

设置swiper的effect为'fade'，切换时初始状态为第一个 swiper-slide透明度为1，其他为0，但切换到第二个时，第一个和第二个透明度都为1，按理说这时候第一个透明度应该为0才对。
这样导致的问题就是，如果切换的内容为一样位置大小的图片还好，是文字时，由于第一第二个swiper-slide透明度都为1，两者文字会叠加在一起出现，继续往第三个切换就是三段文字叠一起……

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

骑着蜗牛赛跑 · 发表于 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

东张西旺 · 发表于 2018-9-11 16:33:48

asdhhsuasg

ming666 · 发表于 2022-3-13 22:41:49

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

不错，问题解决了

tangelang · 发表于 2022-7-26 11:57:34

牛啊牛啊