Swiper实现正反向无缝轮播（跑马灯）
程序员文章站
2022-07-15 13:26:25
...
Swiper实现正反向无缝轮播（跑马灯）
附上Swiper官方文档：https://www.swiper.com.cn/api/index.html
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。如下：
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
2.html和js中内容，初始化。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
})
</script>
3.如果用到框架，vue，angular，react啥的，可以这样
var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
上面的直接看文档就能解决，下面主要介绍如何实现反向无缝，还有就是我实现反向的时候会有bug（切换页面样式错乱！！！）
1.首先要保证轮播图数据先获取到，再去初始化轮播图。
2.附上代码
this.swiperF2 = new Swiper('.swiper-container-f2', { //名字可以改
observer: true,
observeSlideChildren: true,
observeParents: true, //这三个可以去文档看下介绍，主要就是异步情况会重新加载swiper。
loop: true, //开启环路
speed: 10000, //每个轮播图过渡的时间
spaceBetween: 30, //每个轮播图间隔
slidesPerView: 'auto', //当前页面显示几个，这里是auto
loopedSlides: 6, //比你页面显示的数量大于2就好
updateOnWindowResize: false, //分辨率改变时，防止样式错乱加上！
autoplay: {
delay: 0, //每循环一圈，间隔时间，无缝轮询，则为0
stopOnLastSlide: false,
disableOnInteraction: false,
},
});
还需要改变下css样式，目的是覆盖原来的切换效果，变为平滑过渡：
.swiper-wrapper {
transition-timing-function: linear !important; //想好具体位置放到哪，得能替换！
}
到这里已经实现了无缝轮播，但我在实现反向的时候出现了bug，切换tab页后样式错乱。困扰了好久，最后我选择了不用官方文档的 reverseDirection: true属性设置，而是这样：
<div class="swiper-container" dir="rtl">
既原来还是正向，这样就能反过来！！！！！
写的不是很详细，有问题私信，免费及时解决！！！