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

最近有一个（VUE）需求实现如下：可以通过左右箭头按钮实现轮播图，轮播图切换时，下方的缩略图也要对应显示，并且缩略图是可以滚动的（比方说一共有八张图片，但是缩略图展示时一次只能展示五张）。同时点击缩略图时，轮播图也要对应显示。下面是已完成的效果图。要完成此需求首先去查了很多插件。像elementui实现轮播图都很方便，但是不符合我这该死的需求。索性找到了这个插件，还有一些大佬的文档，解决坑的文档。

她定有过人之处_cherish

6514人浏览 · 2022-01-17 17:16:42

她定有过人之处_cherish · 2022-01-17 17:16:42 发布

最近有一个（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：

引用组件和css

网上大部分引用css的都已经报错了，下面css是正确的引用方式，引用的是node_moudles里面的

引用组件时 swiper swiperSlide 首字母最好小写

坑3：

centeredSlides: true

如果不设置为true ，联动会有问题。

而如果设置为true了那么初始页面会比较丑陋，因为是从中间开始布局的而不是最左面。为了避免这个问题，只能设置是循环 loop 为true

属于优化的一点：不想让控制轮播图的箭头按钮显示在图片上，而是两侧

最后为了先人种树后人乘凉附上代码

<template>
  <div class="firstDiv">
    <div class="swiper-button-prev" style="position:absolute;background-color:red; width:50px; height:50px;left: 220px;top: 400px" slot="button-next"></div>
    <div class="swiper-button-next" style="position:absolute;background-color:red; width:50px; height:50px;left: 1620px;top: 400px" slot="button-next"></div>

    <div class="centerDiv">
      <div class="thumb-example">
        <!-- 大轮播图 -->
        <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>
          <swiper-slide class="slide-6"></swiper-slide>
          <swiper-slide class="slide-7"></swiper-slide>
          <swiper-slide class="slide-8"></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>
        <!-- 小缩略图 -->
        <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-slide class="slide-6"></swiper-slide>
          <swiper-slide class="slide-7"></swiper-slide>
          <swiper-slide class="slide-8"></swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
//import 'swiper/css/swiper.css'
import 'swiper/swiper-bundle.css'

export default {
  name: 'image',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptionTop: {
        loop: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    }
  },

  mounted () {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      console.log(this.$refs)
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
}
</script>

<style scoped>
.firstDiv{
  width: 1920px;
  height: 1080px;
  position: relative;
}

.centerDiv{
  width: 900px;
  height: 800px;
  position: absolute;
  left:510px;
  top:200px;
}

.thumb-example {
  height: 580px;
  background-color: transparent;
}

 .swiper-slide {
  background-size: cover;
  background-position: center;
}

.slide-1 {
  background-image: url('../../../../static/img/dandan/g1.jpg');
 }
.slide-2 {
  background-image: url('../../../../static/img/dandan/g2.jpg');
 }
.slide-3 {
  background-image: url('../../../../static/img/dandan/g3.jpg');
 }
.slide-4 {
  background-image: url('../../../../static/img/dandan/g4.jpg');
 }
.slide-5 {
  background-image: url('../../../../static/img/dandan/g5.jpg');
 }
.slide-6 {
  background-image: url('../../../../static/img/dandan/g6.jpg');
}
.slide-7 {
  background-image: url('../../../../static/img/dandan/g7.jpg');
}
.slide-8 {
  background-image: url('../../../../static/img/dandan/g8.jpg');
}

.gallery-top {
   height: 80%;
   width: 100%;
 }
.gallery-thumbs {
   height: 20%;
   box-sizing: border-box;
   padding: 10px 0;
 }
.gallery-thumbs .swiper-slide {
   width: 20%;
   height: 100%;
   opacity: 0.4;
 }
.gallery-thumbs .swiper-slide-active {
   opacity: 1;
 }

</style>

效果就完成啦