vue-active-swiper/basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-active-swiper</title>
  <link rel="stylesheet" href="VueActiveSwiper.css">
  <style>
    body { margin: 0; }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <script src="VueActiveSwiper.umd.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  const ua = navigator.userAgent.toLocaleLowerCase()
  if (ua.indexOf('android') === -1 && ua.indexOf('iphone') === -1) {
    alert('请在移动端预览')
  }

  const Swiper = VueActiveSwiper.Swiper
  const SwiperItem = VueActiveSwiper.SwiperItem
  new Vue({
    el: '#app',
    template: `
    <div>
      <Swiper ref="mySwiper" :urlList="urlList" :showCounter="true" />
      <input type="number" v-model="gotoIndex" />
      <button @click="goto">goto</button>
    </div>
    `,
    components: {
      Swiper,
      SwiperItem
    },
    data () {
      return {
        urlList: [
          'https://dummyimage.com/375x200/00FFCC?text=1',
          'https://dummyimage.com/375x200/669966?text=2',
          'https://dummyimage.com/375x200/9999CC?text=3',
        ],
        gotoIndex: 1
      }
    },
    methods: {
      goto () {
        this.$refs.mySwiper.goto(this.gotoIndex - 1)
      }
    }
  })
</script>
</html>