如何解决在 Swiper 循环模式下最后一张幻灯片后过渡不平滑
我试图在滑动时为内部内容设置平滑过渡(转换:缩放)。我添加了所需的 css 规则。这是有效的,但在切换最后一张幻灯片后,会有一个突然的比例变化。 (不顺利)。
在文件 swiper/src/core/loop/loopFix.js 中库的源代码中,我找到了第 28 行:const slideChanged = swiper.slideTo(newIndex,false,true);
由此,我意识到幻灯片的循环是根据以下原理发生的:在最后一张幻灯片之后,我们立即切换到上一张(速度= 0)并产生一个动画,表明我们已经通过了圆圈。
我的代码示例:https://stackblitz.com/edit/swiper-demo-9-vertical-slider-x3g4my
重现问题的步骤:
- 向下滑动两张幻灯片
- 第三次向下滑动,注意比例的突然变化
有什么办法可以解决这个问题吗?
解决方法
在循环幻灯片项目和在活动幻灯片上进行转换/变换时,我遇到了与 Swiper 类似的问题。
我发现我也可以添加 .swiper-slide-duplicate-active
。
我尝试更新您的演示,如果似乎以下更改使过渡顺利。
.swiper-slide .content {
transform: scale(0.5);
}
.swiper-slide-active .content,.swiper-slide-duplicate-active .content {
transform: scale(1);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。