swiper的使用（触摸滑动轮播组件）

swiper官网及api文档

在Vue项目中优雅的使用swiper插件

1.npm命令安装swiper

npm install swiper --save-dev

2.在需要用到swiper插件的组件中引入swiper

import Swiper from "swiper"

3.在组件style中引入swiper插件的css(根据自己的项目路径选择)

<style lang="scss">
@import "../../node_modules/swiper/dist/css/swiper.css";
</style>

4.在methods方法里面初始化swiper插件

methods:{
	//初始化swiper插件
	_initSwiper(){
		var mySwiper = new Swiper ('.swiper-container', {
			direction: 'horizontal',
			loop:true,
			
			//如果需要分页器
			paginationj: {
			el: '.swiper-container',
			
			autoplay:true,//自动切换，等同于以下设置
		    /*autoplay: {
			    delay: 3000,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
		    },*/
		    }
		})
	}
},

5.在mounted里面调用

mounted(){
	this._initSwiper();
}