swiper 轮播组件的应用

swiper 轮播组件的应用

---

swiper 组件在应用时,会发现左右空白,图片轮播时不能整个图片轮播。

原因分析: 原因大致有两种 :

1.  图片没有设置100%  这个占很大一部分  网上对于第一种的解释比较多,在这里我就不过多解释了

2. 这个问题就比较特殊

var swiper = new Swiper('.swiper-container', {
			zoom: true,
			loop: true,
            // 这个  spaceBetween  控制的就是左右的边距出现这个就是自己不小心或者想设置其他属性时写错了
			spaceBetween: 0,
			speed: 1000,
			slidesPerView: 'auto',
			loopedSlides: 5,
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.swiper-pagination',
			},
		});

      其实第2种并不算是问题,但是这要是设置失误很难会想到这里  spaceBetween 得值就是边距 我这里设置的是0 这个看个人需要可以随意给值。

要是哪里有不对 欢迎随时指正。