微信小程序轮播图实现 含小圆点 图片下方显示标题

html代码

<view class="lb" >
            <swiper indicator-dots="true" autoplay="true" interval="3000" current="0" circular="true" style="width:100%;" >
                <swiper-item>
                    <image  src="../image/im1.jpg"  alt="" bindtap="viewTap1"  style="width:100%;height:100%" mode="widthFix"></image>
                    <text class="head_text" bindtap="viewTap" >标题1</text>
                </swiper-item>
                <swiper-item>
                    <image  src="../image/im2.jpg" style="width:100%;height:100%" mode="widthFix" alt=""></image>
                    <text class="head_text">标题2</text>
                </swiper-item>
                <swiper-item>
                    <image  src="../image/im3.jpg" style="width:100%;height:100%" mode="widthFix" alt=""></image>
                    <text class="head_text">标题3</text>
                </swiper-item>
            </swiper>
</view>

css代码

.lb{
  /* float: left; */
  width: 100%;
  height: 220px;
  padding: 0px;
  /* margin-top: 51px; */
  /* background-color: red; */
}
.lb swiper{
  margin: 0px;
  width: 100%;
  height: 100%;
  /* margin-top: 51px; */
  /* height: calc(100vw * 187 / 360); */
}

.swiper image{
  width: 100%;
  height: 100%;
  text-align: center;
  /* margin-right: 18px; */
  /* display: block; */
}
.head_text{
  position: relative;
  width: 100%;
  text-align: center;
  left: 10%;
  bottom: 22%;
  color: white;
}