小程序轮播图 竖向

<swiper wx:key="property" wx:if="{{banners.length}}" style="margin-top: {{menuButtonTop}}rpx" class="bannerSwiper"
            previous-margin="54rpx" next-margin='54rpx' autoplay="true" vertical="false"
            indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
        <block wx:key="property" wx:for="{{banners}}">
            <swiper-item>
                <image class="shown {{index === xindex?'imageBanner':'imageBanner_small'}}" data-index="{{index}}"
                       data-item="{{item}}" src="{{item.url}}"></image>
            </swiper-item>
        </block>
    </swiper>

vertical=“false”

样式

.bannerSwiper {
    height: 20vh;
    width: 100vw;
    position: relative;
    left: 0rpx;
    top: 0rpx;
}
.shown {
    overflow: hidden;
    transition: transform 500ms;
    transform: scale(0.95,0.9);  /* 因为非主图看不清，所以可以变形处理 */
}
.imageBanner {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: 0.2s, ease-in 0s;
    position: relative;
    padding: 0;
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    line-height: 100%;
    background-color: #d3d3d3;
    text-align: left;
}

.imageBanner_small {
    transform: scale(0.93);
    transition: 0.2s, ease-out 0s;
    border-radius: 10rpx;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -16rpx;
    z-index: 100;
    padding: 0;
    background-color: #D3D3D3;
    line-height: 100%;
    text-align: left;
}
.bannerDots{
    width: 100%;
    left: 0;
}

.bannerDots{
    height: 6px;
}

.dot{
    width: 6px;
    height: 6px;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #fff;
}
.dot.active{
    width: 15px;
    /*background: linear-gradient(45deg, #047a7c, #48c7d0);*/
    background-color: #1cbbb4;
}
.flex_c {
    /* 水平居中 */
    display: flex;
    justify-content: center;
    /*left: 40rpx;*/
}
.abs,.cm {
    position: relative;
    bottom: 25rpx;
}
.title {
    left: 2px;
    position: absolute;
    bottom: 30rpx;
    width: 100%;
    color: white;
    padding: 0rpx 20rpx;
}