2019-01-18左右按钮控制swiper轮播图切换

今天需要实现一个左右按钮控制轮播图滚动的效果！

image.png

思路：我们可以尝试获取并改变current的值；
这是swiper滑动视图容器的说明

image.png

image.png

这是wxml代码

<view class='roll-out'>
  <swiper autoplay interval="4000" duration="500" class='roll' current='{{current}}' bindchange='getCurrent' circular='true'>
    <block wx:for="{{imgUrls}}" wx:key>
      <swiper-item>
        <image src="{{item}}" class="roll-image" />
      </swiper-item>
    </block>
  </swiper>
  <view class='toleft' bindtap='toleft'></view>
  <view class='toright' bindtap='toright'></view>
</view>
<!-- 轮播图结束 -->

这是wxss

page{
  background-color: #eff3f6;
}
/* 轮播图开始 */
.roll-out{
  position: relative;
}
.roll{
  width: 750rpx;
  height: 310rpx;
}
swiper-item{
  width: 100%;
  height: 100%;
}
.roll-image{
  width: 100%;
  height: 100%;
}
.roll-out .toleft{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 50%;
  left: 36rpx;
  border-right-color: transparent;
  border-color: #fff;
  border-width: 0 0 2px 2px;
  border-style: solid;
  transform: rotate(45deg) translateY(-50%);
}
.roll-out .toright{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 50%;
  right: 36rpx;
  border-right-color: transparent;
  border-color: #fff;
  border-width: 2px 2px 0 0;
  border-style: solid;
  transform: rotate(45deg) translateY(-50%);
}
/* 轮播图结束 */

这是JS（只有关键的部分）

Page({
  data: {
    current:'0',
  },



//省略若干行        !省略若干行                             !省略若干行


//先获取当前的current
  getCurrent: function(e){
    this.setData({
      current: e.detail.current
    })
  },

//向左滑动
  toleft: function () {
    if(this.data.current == '0'){
      this.setData({
        current: this.data.imgUrls.length - 1
      })
    }else{
      this.setData({
        current: this.data.current - 1
      })
    };
    
  },
//向右滑动
  toright: function(){
    if (this.data.current == this.data.imgUrls.length - 1) {
      this.setData({
        current: '0'
      })
    } else {
      this.setData({
        current: this.data.current + 1
      })
    }
  }