微信小程序实现轮播多张图做无限滚动效果实现方式是利用小程序原声组件swiper，方向设置为纵向：vertical=‘t

实现方式是利用小程序原声组件swiper，方向设置为纵向：vertical=‘true'设置同时显示的滑块数量：display-multiple-items='3'设置自动轮播：autoplay：‘true'.

<swiper class="switm" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='3' >
         <view class="dynamic" wx:for="{{bannerImg}}" wx:key="*this" wx:for-index="idx">
           <swiper-item>
             <view class="dynamicBox {{index==0?'dynamicBoxf':''}}">
               <image class="dynamicImg" src='{{item.headIcon}}'></image>
               <view class="dynamicTxt">成功购买：{{item.product}}</view>
             </view>
           </swiper-item>
         </view>
 </swiper>
 <style>
 .switm {
 width: 55%;
 height: 230rpx;
 position: fixed;
 bottom: 150rpx;
 left: 0;
 z-index: 99;
 left: 20rpx;
 overflow: hidden;
}
.dynamic {
 width: 100%;
 /* height: 160rpx; */
}
.dynamicBox {
 width: 400rpx;
 height: 50rpx;
 background-color: #2d2a2da2;
 border-radius: 40rpx;
 box-sizing: border-box;
 margin: 20rpx 0;
 display: flex;
 align-items: center;
}
.dynamicBoxf {
 /* background-color: #2d2a2d4f; */
 opacity: 0.4;
}
.dynamicImg {
 width: 40rpx;
 height: 40rpx;
 border-radius: 40rpx;
}
.dynamicTxt {
 font-size: 24rpx;
 width: 340rpx;
 color: #fff;
 margin-left: 10rpx;
 display: -webkit-box;
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
 white-space: normal !important;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
}
 </style>