swiper组件  next-margin属性设置问题，还有就是你的素材图片要一样大小哦

宽度减去左右内边距就好了

<template>
<view class="banner-box">
<view class="banner-bg" :style="{'background-image': `linear-gradient(${bannerBackground || '#345DC2'} 50%, #FFF)`}" ></view>
<swiper 
class="banner-swipper"
indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFFF"
autoplay :interval="4000" :current="current" @change="swiperChange"
>
<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl"></image>
<div>{{item.background}}</div>
</swiper-item>
</swiper>
</view>
</template>

<script>
 
 
export default {
name:"jingBanner",
props:{
bannerList:{
type: Array,
default:()=>[
{
id:1,
imageUrl:"../../static/images/it01.png",
background:'#009B8C',
advertUrl:"/pages/course/course-details"
},
{
id:2,
imageUrl:"../../static/images/it02.png",
background:'#6E3DE6',
advertUrl:"/pages/course/course-details"
},
{
id:3,
imageUrl:"../../static/images/it03.png",
background:'#0D81ED',
advertUrl:"/pages/course/course-details"
},
{
id:3,
imageUrl:"../../static/images/it04.png",
background:'#dda0dd',
advertUrl:"/pages/course/course-details"
},
]
},
},
 
data() {
return {
current: 0,// 当前所在滑块的index
bannerBackground:'' //背景色
};
},
methods:{
swiperChange(e){
this.current = e.detail.current;
this.bannerBackground = this.bannerList[this.current].background
console.log(e);
}
}
}
</script>

<style>
 
.banner-box{
 padding: 0 30rpx;
 padding-top: 120rpx;
.banner-bg{
position: absolute;
top: 0;
left: -30rpx;
width: 130%;
height: 470rpx;
transform: .5s;
background-image: linear-gradient(red 50%, #FFF);
}
.banner-swipper{
height: 350rpx;
.swiper-item{
height: 100%;
image{
width: 100%;
height: 100%;
border-radius: 15rpx;
}
}
}
}
</style>