vue3使用Swiper实现简单轮播图

Swiper官网地址

1、安装Swiper

npm i swiper@5.4.5

2、引入组件库

	import Swiper from 'swiper' // 引入库
	import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
1
2

3、完整代码

<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, i) in imgs" :key="i"><img :src="item.pic" /></div>
		</div>
	</div>
</template>
<script>
	import { reactive, onMounted } from 'vue'
	import Swiper from 'swiper' // 引入库
	import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
	import icon_right_0 from '@/assets/homedetail/banner.jpg' //引入的图片
	import icon_right_1 from '@/assets/homedetail/banner.jpg1'//引入的图片


	export default {
		name: 'HomeSwiper',
		setup() {
			onMounted(() => {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true, // 循环模式选项
					autoplay: true, //自动滚动
					effect: 'fade',//渐变切换
					autoplay: {
						delay: 2000, //1秒切换一次
						pauseOnMouseEnter: true //鼠标移入 轮播暂停

					},

				})
			})
			let imgs = reactive([
				{ pic: icon_right_0 }, 
				{ pic: icon_right_1 }, 
				{ pic: icon_right_0 }
			])
			return {
				imgs
			}
		}
	}
</script>
<style lang="less">
	.swiper-container {
		width: 100%;
		height: 200px;
		
		.swiper-slide {
			width: 100% !important;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

4、实现效果:

无左右切换 无底部小圆点