uniapp-swiper轮播图中间放大两边缩小

有个新需求,做一个轮播图,但是需要轮播到中间的时候,中间放大. 是采用uniapp开发的小程序 下面贴代码和效果图哈

代码块:


    
        
            
                {{item.title}}
                
                    
                
                
                
                    {{item.txt2}}
                
            
        
    


.con-part2-con {
    width: 100%;
    height: 390rpx;

    .swiper-tall {
        display: flex;
        align-items: center;
        height: 388rpx;

        .con-part2-con-container {
            display: flex;
            align-items: center;
            width: 50% !important;

            .slide-image {
                height: 305rpx;
                width: 223rpx;
                z-index: 1;
                margin: 0 auto;
                padding-top: 12rpx;

                .part2-con-title {
                    text-align: center;
                    font-size: 22rpx;
                    font-family: PingFangSC;
                    font-weight: 400;
                    color: #3596F1;
                }

                .part2-con-img {
                    margin-top: 13rpx;
                    width: 133rpx;
                    height: 136rpx;
                    margin: 0 auto;

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .part2-con-txt1-img {
                    display: block;
                    margin: 10rpx auto 0rpx;
                    height: 28rpx;
                    width: 170rpx;
                }

                .part2-con-txt2 {
                    text-align: center;
                    font-size: 20rpx;
                    font-family: PingFangSC;
                    font-weight: 500;
                    color: #FFFFFF;
                    width: 121rpx;
                    margin: 20rpx auto 0rpx;
                }
            }

            .active {
                transform: scale(1.14);
                transition: all 0.2s ease-in 0s;
                z-index: 20;
            }
        }
    }
}

partSwiperChange(event) {
    this.partcurrentIndex = event.detail.current
}
partSwiperChangeList: [{
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量800份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize3.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img3.png',
        txt2: 'xxxx'
    }, {
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量100份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize1.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img2.png',
        txt2: 'xxxx'
    },
    {
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量500份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize2.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img1.png',
        txt2: 'xxxx'
    },
],
partcurrentIndex: 0,


你可能感兴趣的:(前端,javascript,html)