uniapp轮播图（swiper）

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
changing-class	String		acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序不支持

效果图 

 代码块部分

<template>
	<view class="backgroundBanner" :style="{backgroundColor:backColor}">
		<view class="banner">
			<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
				easing-function="true" indicator-dots='true' @change="swiperChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.url"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						url: 'https://img-blog.csdnimg.cn/37fa214c6c744e4ba0fcb2233017c8f4.png',
						color: 'red'
					},
					{
						url: 'https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png',
						color: 'green'
					},
					{
						url: 'https://img-blog.csdnimg.cn/ae94ba1d709744e2a6e36eb7d981f0a9.png',
						color: 'blue'
					},
					{
						url: 'https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png',
						color: '#F0AD4E'
					}
				],
				backColor: ''
			}
		},
		mounted() {
			this.backColor = this.bannerList[0].color;
		},
		methods: {
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.backColor = this.bannerList[index].color;
			},
		}
	}
</script>

<style>
	.backgroundBanner {
		padding: 30rpx 10rpx;
		box-sizing: border-box;
	}

	.banner {
		width: 95%;
		margin: 0 auto;
	}

	.banner swiper {
		height: calc(750rpx / 1.9); //calc(屏幕宽度 / (图片宽度 / 图片高度))
	}

	.banner image {
		width: 100%;
		height: 100%;
	}
</style>