Vue-Awesome-Swiper实现缩略图控制循环,循环背景图，显示多图轮播，点击左右滚动一张图

效果图：

 

本姐只展示关键代码哈

上代码：网站有完整代码，但是数据不是循环的。https://surmon-china.github.io/vue-awesome-swiper/

循环数据的代码在此：

1，安装：cnpm i vue-awesome-swiper --save

2,配置（main.js）:

import VueAwesomeSwiper from 'vue-awesome-swiper

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

Vue.use(VueAwesomeSwiper)

3,然后在要使用的swiper的组件中引入

import { swiper.swiperSlide} from /vue-awesome-swiper

 

 

即可，主要代码是

backgroundImage: "url(" + require("../static/imgs/4.jpg") + ")",

注意是本地图片的二话一定要使用require。

over