Use swiper5 in vue

1. Install swiper

1. There are many versions of swiper, only one version is enough, different versions have different usage methods

npm install swiper@5.4.5

2. Install vue-awesome-swiper

1. Vue-awesome-swiper works with swiper
2. The vue-awesome-swiper version I chose is 4.1.1, other versions may have different usage methods, not listed one by one

npm i vue-awesome-swiper@4.1.1

4. Introduced in main.js

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

5. Use in the page

<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-slide>Slide 6</swiper-slide>
				<swiper-slide>Slide 7</swiper-slide>
				<swiper-slide>Slide 8</swiper-slide>
				<swiper-slide>Slide 9</swiper-slide>
		</swiper>
	</div>
</template>
<script>
	data(){
    
    
		return {
    
    
		// 具体他的配置在官网中查看,根据需求配置
		 // https://www.swiper.com.cn/api/navigation/209.html
			swiperOptions: {
    
    
				slidesPerView: 5,
				autoplay: {
    
    
					delay: 1000,
					stopOnLastSlide: false,
					disableOnInteraction: true,
				}
			}
		}
	}
</script>
<style>
.banner {
    
    
	width:200px;
	height:100px;
}
</style>

So far, the curtain call, if it helps you, just like it and go, three Q~