Swiper.js 实现自动切换时反向切换

注意： 反向自动切换效果启用版本为 4.1.0

效果展示

完整代码

var swiper = new Swiper('.swiper', {
	slidesPerView: 3,					// 设置slider容器能够同时显示的slides数量，可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量
	direction : 'vertical',				// Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical
	spaceBetween: 10,					// 在slide之间设置距离（单位px）
	autoplay: {
		delay: 3000,					// 自动切换的时间间隔，单位ms
	 	disableOnInteraction: false,	// 用户操作swiper之后，是否禁止autoplay。默认为true：停止
	 	reverseDirection: true,			// 关键代码，开启反向自动轮播
	},
	observer: true,						// 开启动态检查器，监测swiper和slide，监测到DOM变化，更新Swiper
	observeParents: true,				// 当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper
	roundLengths : true,				// 防止某些分辨率的屏幕上文字或边界(border)模糊
	loop: true,
	speed: 300,
	on: {
		slideChangeTransitionEnd: function() {
			this.autoplay.start();		// swiper从一个slide过渡到另一个slide结束时执行，防止 disableOnInteraction 设置无效
		}
	},
});