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

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

bash 复制代码
<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>
相关推荐
winfredzhang4 个月前
利用 Python 制作图片轮播应用
xml·python·轮播
full courage5 个月前
【Android】实现图片和视频混合轮播(无限循环、视频自动播放)
android·xml·kotlin·android studio·音视频·播放器·轮播
爱吃果蔬的猫7 个月前
js 写 视频轮播
javascript·css·音视频·轮播
heiyay1 年前
css基础之实现轮播图
前端·javascript·css·轮播
howard20051 年前
微信小程序案例2-2:本地生活
微信小程序·生活·轮播·九宫格