SOURCE

new Vue({
  el: "#vue-swiper",
  data: {
    w: 480,
    h: 220,
    ruler: 0
  },
  computed: {
    listStyleObj() {
      return {
        transform: "translate(" + this.w * this.ruler + "px,0)"
      }
    }
  },
  methods: {
    movePage(dir) {
      if (dir == 1) { //上一页
        if (this.ruler == 0) return;
        this.ruler++;
      } else { //下一页
        if (this.ruler == -4) return;
        this.ruler--;
      }
    }
  }
})

<div class="vue-swiper" id="vue-swiper">
  <ul class="vue-swiper-list" :style="listStyleObj">
    <li class="vue-swiper-item" v-for="n in 5">
      {{n}}
    </li>
  </ul>
  <a href="javascript:;" class="btn prevBtn" @click="movePage(1)">
    <i class="fa fa-angle-left">
    </i>
  </a>
  <a href="javascript:;" class="btn nextBtn" @click="movePage(2)">
    <i class="fa fa-angle-right">
    </i>
  </a>
  <div class="navigation">
    {{Math.abs(ruler)+1}}/5
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vue-swiper {
  position: relative;
  width: 480px;
  height: 220px;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 0;
  .vue-swiper-list {
    width: 2400px;
    height: 100%;
    transition: all 0.3s;
    .vue-swiper-item {
      position: relative;
      float: left;
      width: 480px;
      height: 100%;
      font-size: 16px;
      list-style: none;
      text-align: center;
      font-size: 26px;
      line-height: 220px;
      &:nth-of-type(1) {
        background: #ff0066;
      }
      &:nth-of-type(2) {
        background: #ffccff;
      }
      &:nth-of-type(3) {
        background: #ccffff;
      }
      &:nth-of-type(4) {
        background: #cccc99;
      }
      &:nth-of-type(5) {
        background: #ffffcc;
      }
    }
  }
  //上下页
  .btn {
    position: absolute;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    color: #333;
    text-align: center;
    line-height: 30px;
    &.prevBtn {
      left: 5px;
    }
    &.nextBtn {
      right: 5px;
    }
  }
  //导航
  .navigation {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    font-size: 14px;
    text-align: center;
  }
}