微信小程序的轮播图也是十分的方便，我们可以直接调用，不用自己再写多余的逻辑了，这样也极大的方便了我们的开发，在使用过程中，小编发现原生的小程序无法满足需求了，小编想在图片下方添加行文字，但是原生的轮播图无法满足小编的基本需求了。所以小编自己进行了部分修改，一起来看下。
先来看下效果图：

实现代码：

 <swiper indicator-dots="{{true}}" style="height: 200px;">
            <block wx:for="{{covers || []}}">
                <swiper-item>
                    <image src="{{item}}" class="slide-image" style="width: 100%; height: 100%;" mode="aspectFill" bindtap="onImageClick" data-images="{{covers || []}}" data-index="{{index}}" />
                    <!-- 关键代码 -->
                    <view style="font-size: 18px;width:{{width}}px;padding:10rpx; color: black; font-weight: 800; padding: 2px 0;background:rgba(0,0,0,0.4);position: absolute;bottom:0;left:0%;transform:translateX(0%);text-align:left;">
                        <text style="color:#FFFFFF;padding-left:30rpx;">{{product.name}}</text>
                    </view>
                </swiper-item>
            </block>
</swiper>