Swiper中文论坛

标题: 异形的slide循环后的bug（大牛进） [打印本页]

---

作者: hello丶world    时间: 2019-7-22 15:04
标题: 异形的slide循环后的bug（大牛进）


根据我的css，非当前的slide缩小一半。
从1111 => 22222 => 33333 => 复制的1111这里都是正常的，再次拖动 ‘复制的1111’ ，swiper会默认将平移的位置重置，并将当前的slide重置为最开始的 ‘1111’，如果我的css没有加过渡，那么的确可以。由于有动画，所以就出现了 ‘复制的1111（缩放：1）’ => ‘原始的1111（缩放0.5）’ => ‘原始的1111（缩放1）’，这个不好的用户体验让我纠结了好久，不知有没有大牛解决过类似问题。（slide是固定宽度的）

1. new Swiper('.swiper-wrap-index', {
   
2.     slidesPerView: 'auto',
   
3.     spaceBetween: -160,
   
4.     centeredSlides: true,
   
5.     loop: true,
   
6.     loopedSlides: 5
   
7. });

复制代码

1. .swiper-slide:not(.swiper-slide-active) {
   
2.     opacity: .5;
   
3.     transform: scale(.5);
   
4.             }

复制代码

---

作者: admin    时间: 2019-7-22 20:08
处理一下这些类名试试
swiper-slide-duplicate
swiper-slide-duplicate-active
更新了基础demo，可以照着demo搞

---

作者: tyleung    时间: 2021-11-3 18:21
这个有demo吗

---

作者: tyleung    时间: 2021-11-3 18:30
你好  这个可以下载源码吗   学习一下

---

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

Powered by Discuz! X3.2