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

 

 

<template>

<!-- swiper1 -->

<div class="top" style="height: 340px; width: 340px">

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">

<swiper-slide class="slide-1" style="height: 340px; width: 340px"

v-for="(item,index) in msg" :key="index" :style="item.icon">

<!-- <pic-zoom :url="" :scale="3"></pic-zoom> -->

</swiper-slide>

</swiper>

</div>

<!-- swiper2 Thumbs -->

 

<div class="swiper" style="height: 340px; width: 340px" >

<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">

<swiper-slide class="slide-1" style="height: 88px; width: 88px"

v-for="(item,index) in msg" :key="index" :style="item.icon">

</swiper-slide>

<div class="swiper-button-next swiper-button-white" slot="button-next"></div>

<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>

</swiper>

</div>

</template>

<script>

export default {

  data() {

       return {

              msg: [

//圖片1

{

'icon': {

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

backgroundSize: "cover",

backgroundposition: "center",

backgroundRepeat: "no-repeat",

},},

//2

{

'icon': {

backgroundImage:

"url(" + require("../static/imgs/5.jpg") + ")",

backgroundSize: "cover",

// backgroundposition: "center",

// backgroundRepeat: "no-repeat",

},},

//3

{

'icon': {

backgroundImage:

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

backgroundSize: "cover",

// backgroundposition: "center",

// backgroundRepeat: "no-repeat",

},}，]

}}}

</script>

便可，主要代碼是

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

注意是本地圖片的二話必定要使用require。

over