实现卡片式轮播的左右边距效果，加左右显示上/前一张的一部分效果

先上效果图

滑动效果

借助uniapp的swiper虽然可以实现但是缺没有这个边距，想要实现要在盒子外面套一个盒子来控制边距设置盒子的大小加上previous-margin，next-margin这两个属性
以下是代码
 

    <div class="stop">
                    <swiper next-margin="16rpx" :current="1" previous-margin="32rpx" circular :autoplay="false">
                        <swiper-item v-for="(item, index) in roomlist" :key="index">
                            <div style="width: calc(100% - 16rpx);">
                                <div style="display: flex;" class="roomBox">
                                    <div></div>
                                    <img style="width: 140rpx;height: 140rpx;border-radius: 32rpx;margin-right: 16rpx;"
                                        :src="item.img" alt="" />
                                    <div>
                                        <div style="font-size: 32rpx;font-weight: bold;">{{item.roomName}}</div>
                                        <div style="font-size: 30rpx;color: #A3A3A3;">{{item.value}}</div>
                                    </div>
                                </div>
                            </div>
                        </swiper-item>

                    </swiper>
                </div>
以下是css
 

.stop {
        //width: 100%;
        height: 204rpx;
        margin-top: 32rpx;
        box-sizing: border-box;
        position: relative;

        :deep() {
            swiper {
                height: 204rpx;
            }
        }
    }

    .roomBox {
        position: relative;
        height: 204rpx;
        box-sizing: border-box;
        align-items: center;
        background: linear-gradient(167deg, #FFFFFF 29%, #FAE3C6 179%);
        display: flex;
        border-radius: 16rpx;
        //padding: 32rpx;
        box-sizing: border-box;
        border: 1px solid #FFFFFF;
        box-shadow: 0px 0px 6.73px 0px rgba(0, 0, 0, 0.05);
    }