微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息

先上效果图：

需求分析：这类轮播图宽度没有沾满屏幕宽度的 100% ，且上一张或下一张图片也显示在页面上。轮播图下方有相关商品描述信息，自定义轮播图选中指示点样式切换。

在 swiper 中， 由于图片和描述信息放在 swiper-item 中，合在一起做 swiper-item 中轮播元素。

HTML:

  <view class="banner-swiper">
    <swiper indicator-dots="{{indicator}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}"
      bindchange="swiperChange">
      <block wx:for="{{arr}}" wx:key="key">
        <swiper-item>
          <image src="{{item.images}}" class="slide-image {{index == swiperCurrent ? ' active' : ''}}"></image>
          <view class='goods-info'>商品信息</view>
        </swiper-item>
      </block>
    </swiper>
    自定义指示点
  </view>

在 swiper 中，设置相关配置，这里将 indicator-dots 设置为 false(是否显示面板指示点)

beforeColor: "white",//指示点颜色 
afterColor: "coral",//当前选中的指示点颜色 
previousmargin: '24px',//前边距
nextmargin: '24px',//后边距
indicator: false, //是否显示指示点
interval: 5000,  //自动切换时间间隔
duration: 400,  //滑动动画时长
autoplay: true, //是否自动切换
circular: true, //是否采用衔接滑动
cur: 0,         //当前所在滑块的index

自定义 指示点 样式：

<view class="dots">
  <block wx:for="{{arr}}" wx:key="{{index}}">
    <view class="{{index== cur?'active':''}} dot"></view>
  </block>
</view>

bindchange事件：current 改变时会触发 change 事件，event.detail = {current: current, source: source}

//轮播图的切换事件  
swiperChange(e) {
  let cur = e.detail.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
  this.setData({
    cur: cur
  })
},

查看完整案例