Vue-awesome-swiper: 自动循环轮播第一个swiper空白
最后一个swiper 跳转第一个 swiper 时，显示错误
描述
单行单列，loop=true 时，当最后一个swiper跳转到第一个swiper时，内容空白。需要手触动，才能完成滑动。
排查
当最后一个swiper 跳转到 第一个 swiper时。
transform: translate3d(-AAApx, 0px, 0px);
AAA 值只有增大，没有减小到firstswiper位置值。
herbomiy
All 25 comments
同样遇到了这个问题，采用api获取列表时会有这个问题。
yuxizhe
on 17 Oct 2017
升级到最新版，Swiper4 中解决了大量 loop 引起的问题。
surmon-china
on 7 Dec 2017
@surmon-china 通遇到这个问题，现在最新版不是3.0.7吗还是有喔
wLove-c
on 29 Dec 2017
没解决吗？？？？....
surmon-china
on 29 Dec 2017
@surmon-china 我现在是3.0.7版本 在loop：true的情况下还是会有空白一下的情况，得手动触发后才显示
wLove-c
on 29 Dec 2017
@wLove-c 你可以在 Swiper 中文网的同版本 example，在自己同样的运行环境下， 进行一次测试，极有可能是来自 Swiper 内部的问题。
surmon-china
on 29 Dec 2017
好，待会去测试一下
wLove-c
on 29 Dec 2017
下载demo下来发现复现比较麻烦，而且也不具有代表性，在vue-awesome-swiper生成DOM是根据数据vfor出来的，如果用swiper的demo要复现 那只能createElement来~
wLove-c
on 29 Dec 2017
我意思是，你可以直接打开 Swiper 中文网里的对应 demo，在自己的环境下测试，不必下载，组件的所有 example 都来自中文网。
surmon-china
on 29 Dec 2017
中文网的是也是这样写定个数的，并且以背景的方式把图片写入..也没有loop：true
wLove-c
on 29 Dec 2017
我在移动端 IOS 11 测试下面多个 Example，未发现所属异常情况。
https://surmon-china.github.io/vue-awesome-swiper/
http://www.swiper.com.cn/demo/290-dynamic-slides.html
http://www.swiper.com.cn/demo/200-infinite-loop.html
surmon-china
on 29 Dec 2017
我用的是这个 3D Coverflow Effect （ 3D滚动切换 ） 即 250这个 加上loop在pc端出现的http://www.swiper.com.cn/demo/index.html
wLove-c
on 30 Dec 2017
@surmon-china 您好，又回到这个问题了，测试了很多方法，还是没能解决无线循环时 空白问题
wLove-c
on 3 Jan 2018
ajax请求数据后，loop的确有问题，静态写slide写死是没问题的，github的demo也是写死，ajax返回数据的情况下，最后一页继续点击，会直接跳过第一页去到第二页
alicksnake22
on 10 Jan 2018
@alicksnake22 我遇到了同样的问题，暂时考虑可能是在数据返回前swiper初始化造成的错误。目前解决方法是：通过 v-if="sponsorRankList.length > 0" 在有返回数据的时候渲染组件。可以解决这个问题
Deeeeeee
on 8 Feb 2018
看来 Loop 引起的问题是永远无法解决的。
surmon-china
on 8 Feb 2018
@Deeeeeee 谢谢 你的方法很管用
leobaixinxin
on 20 Mar 2018
@Deeeeeee 我使用你的方案，等有了数据再渲染，但也不能解决，出现了好多白页
Small-King
on 23 Mar 2018
@Deeeeeee 我使用你的方案，还是无法解决问题。只要数据是动态获取的 就会跳过第一个
@surmon-china loop 的问题 有解决方案么。
forevezxx
on 13 Apr 2018
当你使用了 loop 模式，尽量用 v-if 来控制 swiper 组件的渲染，没办法，loop 一堆毛病
surmon-china
on 18 Apr 2018
我是直接把类名为swiper-wrapper的元素强行往左边移了200个像素，margin-left:-234px
cnhyk9527
on 21 Sep 2018
我也遇到了 果然自动轮播的问题是解决不了的
chenendian
on 14 Mar 2019
我好像找到解决方案了.
遇到这个问题的原因其实是 slide 里面用到了图片, 如果用到了 loop: true. swiper库会在头和尾添加两个重复的slide, 问题在于它添加的两个slide里面的img 的src 是空, 图片为空 所以就白屏了.
<div class="banner-swipe-list swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4" style="width: 341px;"><img src="" alt="" class="banner-picture" style="width: 6.56rem; height: 3rem;"><!----></div>
找到出现的原因就好解决了:
找到这两个空的img标签,
添加上应该存在的图片地址
注意第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片
mounted() {
const duplicateSlide = this.$refs.bannerSwiper.$el.querySelectorAll('.swiper-slide-duplicate img');
if (duplicateSlide.length) {
duplicateSlide.item(0).src = this.getImg(this.bannerList[this.bannerList.length - 1].bannerImage);
duplicateSlide.item(1).src = this.getImg(this.bannerList[0].bannerImage);
}
},
我是这样解决的, 希望能帮到你们
iammvp
on 30 May 2019
我好像找到解决方案了.
遇到这个问题的原因其实是 slide 里面用到了图片, 如果用到了 loop: true. swiper库会在头和尾添加两个重复的slide, 问题在于它添加的两个slide里面的img 的src 是空, 图片为空 所以就白屏了.
<div class="banner-swipe-list swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4" style="width: 341px;"><img src="" alt="" class="banner-picture" style="width: 6.56rem; height: 3rem;"><!----></div>
找到出现的原因就好解决了:
找到这两个空的img标签,
添加上应该存在的图片地址
注意第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片
mounted() { const duplicateSlide = this.$refs.bannerSwiper.$el.querySelectorAll('.swiper-slide-duplicate img'); if (duplicateSlide.length) { duplicateSlide.item(0).src = this.getImg(this.bannerList[this.bannerList.length - 1].bannerImage); duplicateSlide.item(1).src = this.getImg(this.bannerList[0].bannerImage); } },
我是这样解决的, 希望能帮到你们
亲测可以哈哈
lyseky
on 10 Oct 2019
试试把v-for里面的组件换成原生的img，我在使用element-ui的el-image的时候前后都会出现空白，换成img就没有这个问题了
FuhuaChen
on 9 Mar 2020
Related issues
LJade
·
6Comments
Bobur-kobilov
·
5Comments
zhaoFangyi
·
7Comments
pfasang
·
5Comments
KevinCN511
·
4Comments
Most helpful comment
ajax请求数据后，loop的确有问题，静态写slide写死是没问题的，github的demo也是写死，ajax返回数据的情况下，最后一页继续点击，会直接跳过第一页去到第二页