Vue中使用Swiper

• 安装 swiper

  swiper版本众多,单用其中一个版本就够了,不同的版本有不同的使用方式，尽量安装低版本的最好，版本太高可能会不兼容，这里推荐swiper5

  npm install swiper@5.4.5
  

• 安装 vue-awesome-swiper

  vue-awesome-swiper与swiper配套使用

  npm i vue-awesome-swiper@4.1.1
  

• main.js 中引入

  // 如果这里报错,找不到文件,就去node_modules文件夹中查看具体位置在进行引入
  import VueAwesomeSwiper from 'vue-awesome-swiper/dist/vue-awesome-swiper'  
  // css同理
  import 'swiper/css/swiper.min.css'  
  Vue.use(VueAwesomeSwiper)
  

• 页面中使用

  <template>
  	<div class="banner">
  		<swiper ref="mySwiper"
  				style="height:100%;"
  				:options="swiperOptions">
  				<swiper-slide>Slide 1</swiper-slide>
  				<swiper-slide>Slide 2</swiper-slide>
  				<swiper-slide>Slide 3</swiper-slide>
  				<swiper-slide>Slide 4</swiper-slide>
  				<swiper-slide>Slide 5</swiper-slide>				
  		</swiper>
  	</div>
  </template>
  <script>
  	data(){
  		return {
  		// 具体他的配置在官网中查看,根据需求配置
  		 // https://www.swiper.com.cn/api/navigation/209.html
  			swiperOptions: {
  				slidesPerView: 1,
  				autoplay: {
  					delay: 1000,
  					stopOnLastSlide: false,
  					disableOnInteraction: true,
  				}
  			}
  		}
  	}
  </script>
  <style>
  .banner {
  	width:200px;
  	height:100px;
  }
  </style>