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>