vue3中使用swiper8 实现缩略图(thumbs的使用)

在Vue3中使用Swiper8实现缩略图功能，可以按照以下步骤进行操作：

1. 首先，在`main.js`中引入Swiper的相关组件和样式文件。可以使用`import`语句引入`swiper-bundle.css`样式文件和`Swiper`、`Navigation`、`Autoplay`、`Thumbs`组件。例如：

import 'swiper/swiper-bundle.css';
import Swiper, { Navigation, Autoplay, Thumbs } from 'swiper';
Swiper.use(\[Navigation, Autoplay, Thumbs\]);

2. 在Vue组件中，使用`<swiper>`标签创建一个大图的Swiper实例，并设置`thumbs`属性为一个对象，其中`swiper`属性指向一个小图的Swiper实例。同时，设置`modules`属性为需要使用的模块，例如：

<swiper :thumbs="{ swiper: thumbsSwiper }" :modules="\[Navigation, Autoplay, Thumbs\]" class="mySwiper2">
  <swiper-slide v-for="(item, index) of bigImg" :key="index">
    <img class="img" :src="item" />
  </swiper-slide>
</swiper>

3. 创建一个小图的Swiper实例，可以使用`<swiper>`标签，并设置相关属性，例如：

<swiper @swiper="setThumbsSwiper" :spaceBetween="10" :slidesPerView="3" :freeMode="true" :watchSlidesProgress="true" :modules="\[Navigation, Autoplay, Thumbs\]" class="mySwiper">
  <swiper-slide v-for="(item, index) of bigImg" :key="index">
    <img class="img" :src="item" />
  </swiper-slide>
</swiper>

4. 在Vue组件的`methods`中，定义一个方法`setThumbsSwiper`，用于设置小图的Swiper实例。例如：

methods: {
  setThumbsSwiper(swiper) {
    this.thumbsSwiper = swiper;
  }
}

通过以上步骤，你可以在Vue3中使用Swiper8实现缩略图功能。请注意，需要在`main.js`中引入相关组件和样式文件，并在Vue组件中设置`thumbs`属性和`modules`属性，同时定义`setThumbsSwiper`方法来设置小图的Swiper实例。
#### 引用[.reference_title]
- *1* [vue3中使用swiper8 实现缩略图(thumbs的使用)](https://blog.csdn.net/K18032286/article/details/126629411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue中使用swiper6.0实现缩略图控制](https://blog.csdn.net/qq_41287423/article/details/117363287)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]