uniapp中swiper 轮播带左右箭头，点击切换轮播效果demo(整理)

可以点击箭头左右切换-进行轮播

<template>
	<view class="swiper-container">
		<swiper class="swiper" :current="currentIndex" :autoplay="true" interval="9000" circular indicator-dots
			@change="handleSwiperChange">
			<block v-for="(item, index) in swiperList" :key="index">
				<swiper-item>
					<!-- 轮播项的内容 -->
					<image class="swiper-image" :src="item.image"></image>
				</swiper-item>
			</block>
		</swiper>
		<view class="arrow arrow-left" @tap="prev"></view>
		<view class="arrow arrow-right" @tap="next"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						image: "http://www.jq22.com/img/cs/500x500-9.png"
					},
					{
						image: "http://www.jq22.com/img/cs/500x500-9.png"
					},
					{
						image: "http://www.jq22.com/img/cs/500x500-9.png"
					},
				],
				currentIndex: 2,
			};
		},
		methods: {
			handleSwiperChange(event) {
				const current = event.detail.current;
				this.currentIndex = current;
				console.log("当前轮播到第", current, "个索引");
			},
			prev() {
				this.currentIndex = (this.currentIndex - 1 + this.swiperList.length) % this.swiperList.length;
			},
			next() {
				this.currentIndex = (this.currentIndex + 1) % this.swiperList.length;
			},
		},
	};
</script>


<style>
	.swiper-container {
		position: relative;
	}

	.swiper {
		height: 200px;
		/* 设置轮播的高度 */
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		background-color: #000;
		opacity: 0.6;
		border-radius: 50%;
	}

	.arrow-left {
		left: 10px;
	}

	.arrow-right {
		right: 10px;
	}
</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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84