轮播图之两边小中间大

<template>
    <view class="">
        <swiper :indicator-dots="true" :current="currentIndex" :autoplay="true" circular="true" :interval="3000" :duration="1000" previous-margin="80rpx" next-margin="80rpx" @change="swierChange">
            <swiper-item v-for="(item,index) in banners" :key="index">
                <view class="swiper-item"><image :src="item.imgSrc" mode="" :class="currentIndex === index?'activeSwiper':''"></image></view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                currentIndex: 0,
                banners:[
                    {
                        id:1,
                        imgSrc:'../../static/banner1.jpg'
                    },
                    {
                        id:2,
                        imgSrc:'../../static/banner2.jpg'
                    },
                    {
                        id:3,
                        imgSrc:'../../static/banner3.jpg'
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            swierChange(e){
                this.currentIndex = e.detail.current
            }
        }
    }
</script>

<style> 
    swiper {
        position: relative;
    }
    swiper swiper-item image {
        position: absolute;
        height: 200rpx;
        /* opacity: 0.8; */
        top: 18%;
        margin: 0 20rpx;
    }
    .activeSwiper {
        /* opacity: 1; */
        height: 320rpx;
        top: 7%;
        transition: all 0.2s ease 0s;
    }
</style>