swiper自动循环轮播--第一页swiper空白

璐哈路哈呦

于 2024-04-17 18:15:48 发布

阅读量930

点赞数 4

文章标签： vue.js 前端 javascript swiper组件轮播不显示

本文链接：https://blog.csdn.net/qq_39650208/article/details/137883020

版权

文章描述了在VueSwiper组件中设置loop=true时遇到的轮播空白问题，特别是在使用动态图片时。作者提供了两种解决方案：一是针对第一页图片手动赋值，二是使用img标签并设置占位图。参考链接给出了解决类似问题的GitHub讨论.

摘要由CSDN通过智能技术生成

采用swiper组件type_Swiper参数选项，设置轮播loop=true，当轮播一遍再次跳转到第一个swiper时，发现空白，手动触发以后，直接到下一个出现，有网友排查现象：

当最后一个swiper 跳转到第一个 swiper时。
transform: translate3d(-AAApx, 0px, 0px);
AAA 值只有增大，没有减小到firstswiper位置值。

现象复现：如果swiper-slide设置的是写死的值，则不会有问题，有问题的现象是使用图片，会给第一页和最后一页加个swiper-slide，但是没有赋予图片的属性值，导致不显示。

解决方案：

1、如果第一页图片不多的话，可以针对性的给第一页图片赋值显示。注意：第一个标签添加的是slide列表的最后一个图片, 后一个标签则相反添加的是第一个图片.

 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); 
        }

2、其实img标签是好使的，可以切换成img标签。如果本身需要其他组件库里面占位图啥的，可以参考这篇文章img标签图片未加载完成占位图-CSDN博客，设置after属性来设置占位图，解决问题。

参考：https://github.com/surmon-china/vue-awesome-swiper/issues/178