vue-awesome-swiper 实现轮播图和缩略图联动

最近有一个（VUE）需求实现如下：

可以通过左右箭头按钮实现轮播图，轮播图切换时，下方的缩略图也要对应显示，并且缩略图是可以滚动的（比方说一共有八张图片，但是缩略图展示时一次只能展示五张）。同时点击缩略图时，轮播图也要对应显示。

下面是已完成的效果图。

要完成此需求 首先去查了很多插件。像elementui实现轮播图都很方便，但是不符合我这该死的需求。

索性找到了这个插件，还有一些大佬的文档，解决坑的文档。列在下面。

vue-awesome-swiper | Homepage | Surmon's projects

https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/30-thumbs-gallery.vue

vue中使用vue-awesome-swiper插件实现缩略图控制轮播图效果（填坑） - 相戀 - 博客园

vue-awesome-swiper缩略图控制循环无效解决方案 - 简书

我是根据第一个链接 的

下方这个效果实现的。于是开始了我的踩坑之道。（放心，后面会附上姐姐搞的完整代码） 

坑1：

使用这个插件需要安装两个插件

npm install swiper --save

npm install vue-awesome-swiper@3 --save-dev

这里指定了版本 （有的版本可能有问题）

坑2：

引