一，安裝

npm install vue-awesome-swiper --save // npm install vue-awesome-swiper@3.x --save

我安裝的版本是
“swiper”: “^6.6.1”,
“vue-awesome-swiper”: “^3.1.3”,

在使用vue-awesome-swiper組件的時候，縮略圖無法和大圖實現聯動，百度了半天終于發現了一個解決辦法。
官方代碼：

<template><div class="thumb-example"><!-- swiper1 --><swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop"><swiper-slide class="slide-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></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><!-- swiper2 Thumbs --><swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs"><swiper-slide class="slide-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></swiper-slide></swiper></div> </template><script>import { swiper, swiperSlide } from 'vue-awesome-swiper'// >= Swiper 6.ximport 'swiper/swiper-bundle.css'export default {name: 'swiper-example-thumbs-gallery',title: 'Thumbs gallery with Two-way control',components: {swiper,swiperSlide},data() {return {swiperOptionTop: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,slideToClickedSlide: true}}},mounted() {this.$nextTick(() => {const swiperTop = this.$refs.swiperTop.$swiperconst swiperThumbs = this.$refs.swiperThumbs.$swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})}} </script><style lang="scss" scoped>.thumb-example {height: 480px;background-color: #000;}.swiper {.swiper-slide {background-size: cover;background-position: center;&.slide-1 {background-image:url('~@/assets/img/nature1.jpg');}&.slide-2 {background-image:url('~@/assets/img/nature2.jpg');}&.slide-3 {background-image:url('~@/assets/img/nature4.jpg');}&.slide-4 {background-image:url('~@/assets/img/nature5.jpg');}&.slide-5 {background-image:url('~@/assets/img/nature6.jpg');}}&.gallery-top {height: 80%;width: 100%;}&.gallery-thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;}&.gallery-thumbs .swiper-slide {width: 25%;height: 100%;opacity: 0.4;}&.gallery-thumbs .swiper-slide-active {opacity: 1;}} </style>

將mounted中的代碼進行修改：

const swiperTop = this.$refs.swiperTop.$el.swiper const swiperThumbs = this.$refs.swiperThumbs.$el.swiper

總結

以上是生活随笔為你收集整理的vue-awesome-swiper缩略图无法联动的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。