微信小程序實現輪播圖帶透明背景標題、且指示點靠右顯示

效果圖：

wxml:

<swiper indicatorDots="{true}" autoplay="{true}" indicator-active-color="#00ae61">
  <block wx:for="{{imgUrls}}" wx:key="*this">  
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
      <view class='swipertitle'><text>我是標題啦啦啦</text></view>
    </swiper-item>
  </block>
</swiper>

wxss:

.slide-image{
  width: 100%;/*避免右側留白*/
}

/*標題背景*/
.swipertitle{
  position: absolute;
  bottom:0;
  padding: 10rpx;
  background-color: rgba(34, 34, 32, 0.308);
  width: 100%;
}

/*文字樣式*/
.swipertitle text{
  color: white;
  font-size: 28rpx;
}

/*指示點位置*/
.wx-swiper-dots{
  position:relative;
  left: unset!important;
  right: 0;
}

js:

Page({
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ]
  }
})