图片轮播是很经常用到的效果，小程度里默认提供了swiper组件，不过并没有左右切换的按钮/箭头，这里探讨一下如何实现该功能。

一、静态数据

先开发预览版本，数据全部用的js设定好的本地数据，实现方式如下：

<view class=swiper-car>
    <swiper current={{carIndex}} indicator-dots="{{swiperCar.indicatorDots}}" autoplay="{{swiperCar.autoplay}}" interval="{{swiperCar.interval}}" duration="{{swiperCar.duration}}">
        <block wx:for="{{carImgs}}" wx:key="cidx">
            <swiper-item>
                <image src="{{item}}" class="slide-image" />
                </view>
            </swiper-item>
        </block>
    </swiper>
    <button class=swiper-left bindtap="bindPrev">
        <image src=../../images/swiper-prev.png mode=widthFix></image>
    </button>
    <button class=swiper-right bindtap="bindNext">
        <image src=../../images/swiper-next.png mode=widthFix></image>
    </button>
</view>

wxss

.swiper-car {
    height: 430rpx;
    padding: 0 82rpx;
    position: relative;
}
.swiper-car swiper {
    height: 450rpx;
}
.swiper-car swiper-item {
    font-size: 11pt;
}
.swiper-car swiper-item image {
    height: 300rpx;
}
.swiper-car button {
    width: 35rpx;
    height: 65rpx;
    padding: 0;
    position: absolute;
    top: 50%;
    margin-top: -30rpx;
    border: 0;
    background: transparent;
}
.swiper-car button::after {
    border: 0;
}
.swiper-car button image {
    width: 35rpx;
}
.swiper-car .swiper-left {
    left: 25rpx;
    text-align: left;
}
.swiper-car .swiper-right {
    right: 25rpx;
}

实现方式跟网页端的轮播类似。

二、动态数据

上一个例子数据是直接在js里给定，很奇怪的是更换成远程获取的数据，setData后发现图片竟然无法显示了，后面发现是swiper不能在嵌套里的关系(?)，移出view就可以了，但是之前的样式无论如何都不起作用了。
刚好swiper上面有个heading,就将左右箭头放在heading里，再调整下位置

.heading {
    margin-top: 40rpx;
    padding: 15rpx;
    background: #fff;
    font-size: 11pt;
    font-weight: bold;
    color: #000;
    position: relative;
}
.heading .arrow {
    width: 30rpx;
    height: 59rpx;
    z-index: 99;
    padding: 80px 20rpx;
}
.heading .swiper-left {
    position: absolute;
    left: 0;
    top: 290rpx;
    transform: translate(0, -50%);
    cursor: pointer;
}
.heading .swiper-right {
    position: absolute;
    right: 0;
    top: 290rpx;
    transform: translate(0, -50%);
}