vue中使用swiper( vue-awesome-swiper)缩略图

如图：
首先贴上好用的不行的github链接：
(1)https://github.com/surmon-china/vue-awesome-swiper
(2)具体缩略图代码：https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/30-thumbs-gallery.vue

还是自己整理一下吧，哎都是坑，希望下次不要再入坑
Note:左右箭头按钮如果需要放在外面就直接把template里面的标签放在外面。
1.npm安装

npm install vue-awesome-swiper --save

2.main.js全局安装

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.组件里调用

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

4、缩略图（普通的swiper很简单，网上有很多可以借鉴 我备注一下缩略图的）
template中

data中定义

data() {
      return {
        swiperOptionTop: {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        swiperOptionThumbs: {
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true
        }
      }
    },

mounted中

 mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    }

style部分