H5轮播图Vue-cli3使用vue-awesome-swiper缩略图靠左对齐

需求：H5活动带缩略图的轮播，canvas将底图与元素图合成一张，缩略图左对齐，滑动缩略图时大图不联动。

问题：vue-awesome-swiper官方文档带缩略图的示例，上下联动且缩略图居中对齐，当设置参数centeredSlides: true左对齐了，但8张缩略图，第5张开始不能点击。

方案：将vue-awesome-swiper官方分页器示例改成缩略图样式的。

效果：

效果图

demo：demo效果网页

备注：使用了postcss-px2rem将px转成rem，使用配置可以上另一篇文章。

1、安装vue-awesome-swiper

yarn add vue-awesome-swiper // npm install vue-awesome-swiper

2、在main.js中引入

import Vue from 'vue'
import App from './App.vue'

import VueAwesomeSwiper from 'vue-awesome-swiper' // 引入vue-awesome-swiper
import './assets/css/reset.css' // 去掉标签的默认样式
import 'swiper/dist/css/swiper.css' // 引入swiper样式
Vue.use(VueAwesomeSwiper /* { default global options } */) // 使用插件

new Vue({
  render: h => h(App)
}).$mount('#app')

3、Home.vue