如何在swiper中显示两个item以及下一个item的部分内容
我所实现的效果
我实现的代码
<!--图片轮播图-->
<!--要展示两个item 以及下一个item的部分内容,circular需要设置为false,或者不设置,display-
multiple-items设置为2,next-margin按照自己的需求设置-->
<swiper indicator-dots = false vertical = false autoplay = false
display-multiple-items='2' next-margin='150rpx' class="image_group">
<block wx:for="{{item.images}}" wx:for-item="photo" wx:key="*this">
<swiper-item>
<view class='swiper_item'>
<image src="{{photo}}" mode="aspectFill"></image>
</view>
</swiper-item>
</block>
</swiper>
/*轮播图*/
.image_group{
position: relative;
margin-left: 20rpx;
margin-top: 20rpx;
height: 260rpx;
}
.swiper_item {
width: 250rpx;
height: 250rpx;
overflow: hidden;
border-radius: 10rpx;
}
.swiper_item image{
width: 250rpx;
height: 250rpx;
}
注意细节
要展示两个item 以及下一个item的部分内容,circular需要设置为false,或者不设置,否则会出现滑动时部分item不显示问题,display-multiple-items设置为2,next-margin按照自己的需求设置,它的数值决定了下一个item所展示部分的宽度
展示3.5、4.5、5.5个item实现同理
以上内容均为个人通过测试所得的效果,如果不妥,欢迎评论纠错