html
<swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange"> <swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls"> <image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill"></image> </swiper-item> </swiper>
js
data() { return { swiperdata:[], swiperImgUrls: [ 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2797486824,1669366989&fm=26&gp=0.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=43e85524ef76a0511e2a6003ae1cd56a&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F41%2F37%2F01300000169980121904374291568.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606209804674&di=01613472182e0cd4ac6eaaaf9ba18eea&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2F372edfeb74c3119b666237bd4af92be5.jpg' ], currentIndex:0 } }, method:{ swiperChange(event) { console.log(event) this.currentIndex = event.detail.current } }
css
.swiper-block { height: 300rpx; width: 100%; } .swiper-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: unset; } .slide-image { height: 250rpx; width: 520rpx; border-radius: 9rpx; box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2); margin: 0rpx 30rpx; z-index: 1; } .active { transform: scale(1.14); transition: all 0.2s ease-in 0s; z-index: 20; }