vue如何解决轮播图(Swiper)第一张图片一闪而过问题

目录

• vue轮播图(Swiper)第一张图片一闪而过
• 解决方式
• vue图片轮播实现过程
• 实现思路
• 总结

vue轮播图(Swiper)第一张图片一闪而过

解决方式

初始化(Swiper)时，外层添加一个定时器

代码：

setTimeout(function() { 
				var mySwiper = new Swiper($(el), {
					autoplay: true,//可选选项，自动滑动
                    speed:500,//切换时间
					loop : true,
					pagination : pagination,
					paginationType : paginationType,
				// 	observer:true,
				// 	observeParents:true,
				// 	onSlideChangeStart: function(swiper){ 
				// 		swiper.update();
				// 		swiper.reLoop();  
				// 	},
					prevButton: $(el).find('.swiper-button-prev'),
					nextButton: $(el).find('.swiper-button-next'),
				})
    		    }, 500)	

vue图片轮播实现过程

效果图：

由于没有素材就随便找了123456来代替选中的圆点。

实现思路

首先绑定数据源，循环出每个图片，在通过isShow字段来判断是否显示图片。在图片元素写这两个 v-bind:src="item.src" v-show="item.isShow" 一个src用来显示图片，show用来判断图片是否显示。

再为123456下面这个导航添加点击事件，通过点击的元素来设置该数据显示出图片，同时其他图片隐藏。

然后在vue created方法调用开始循环事件，来实现图片轮播。并用一个属性记录起来，方便后面停止循环。

开启轮播后，判断当前显示的图片是否是最后一张如果是就从1开始，如果不是则下标加+1去显示下一张图片。

全部代码：

	
    






	

		
vue轮播图
		

			

				
			
			

				
					{{item.seq}}
				
			
		
	

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。