【swiper轮播图】中加入js时间倒计时——第一张时分秒显示异常解决方法_swiper切换时间不固定

在swiper轮播图中加入js时间倒计时后，轮播一轮后第一个side时间显示异常

产生原因

swiper自动添加一个dom元素（与最后一个side完全相同）至第一个side前、自动添加一个dom元素（与第一个side完全相同）至最后一个side后。
目的是实现无缝轮播，但导致了添加dom元素后新位置第一个与最后一个side无法获取到倒计时信息，因此会出现显示异常问题。

解决方法

在swiperOptions中加入 如下代码：

swiperOptions: {
	//其余配置...
	on: {
		// 回调函数，swiper从一个slide过渡到另一个slide结束时执行。
		slideChangeTransitionEnd() {
			// 在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
			this.slideToLoop(this.realIndex, 0, false);
		},
	}
}
1
2
3
4
5
6
7
8
9
10

注：this指向轮播图本身，无需在data中定义slideToLoop及realIndex