【vue+Swiper】vue中使用swiper缩略图，展示一张大图及n张小图，点击小图切换不同的大图展示，完整代码

效果：

这是在swiper官网上找的示例，swiper太强大了，有非常多不同的示例,有api，有教程，还可以下载示例代码。

但是第一次使用，研究这个缩略图的实现还是花了几个小时，好在实现了。

swiper官网请戳这里

安装

 npm i swiper

将swiper封装成组件可以复用，在components公共组件文件夹中新增swiper文件夹，新增index.vue
选择API文档，Thumbs（缩略图），可以查看缩略图的使用示例
ps：这里要补充下，示例其实挺清楚的，但是因为没有对应的html参考，所以我在这里多花了一点时间。swiper缩略图的实现其实是new Swiper了两个swiper实例，然后通过给主图所在的swiper实例的thumbs对象配置缩略图所在的swiper进行关联。

如果想看完整的示例代码，需要下载它的示例，我下载的是第一个

注意点：

1、加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
在public文件夹的index.html中引入

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 
 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2、添加HTML内容。Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’，我这里是’swiper‘，可以再加类名，但是默认类名一定是’swiper‘。
3、初始化Swiper var swiper = new Swiper(“#mySwiper”, {}）
4、主图与缩略图关联，将点击缩略图的activeIndex传给主图的slideTo方法中

完整代码：
componeents/swiper/index

<template>
  <div class="container-box">
    <!-- 主图 -->
    <div class="swiper mySwiper2" id="mySwiper2">