vue中使用swiper5

1. 安装 swiper

1. swiper版本众多,单用其中一个版本就够了,不同的版本有不同的使用方式

npm install swiper@5.4.5

2. 安装 vue-awesome-swiper

1. vue-awesome-swiper与swiper配套使用
2. vue-awesome-swiper版本我选择的是4.1.1,其他版本可能会有不同的使用方式,不一一列举了

npm i vue-awesome-swiper@4.1.1

4. 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.页面中使用

<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>

至此谢幕,如果帮到你了,就点个赞在走吧, 三Q ~