swiper11 thumbs vue3

### 如何在 Vue3 中使用 Swiper11 实现缩略图（thumbs）功能

#### 安装依赖库
为了能够在项目中使用 Swiper 组件，需先安装 `swiper` 和其样式文件。

npm install swiper@^11.0.0 @types/swiper --save

还需确保已导入必要的 CSS 文件：

import 'swiper/css';
import 'swiper/css/navigation'; // 如果需要导航按钮的话
import 'swiper/css/thumbs';    // 缩略图模块的CSS

#### 创建 Swiper 组件并配置 Thumbs 功能

创建一个新的组件来承载主要图片展示区以及缩略图区域。此部分基于提供的代码片段进行了调整以适应最新版 Swiper 的 API 变化[^3]。

<template>
  <div class="swiper-container">
    <!-- 主轮播 -->
    <swiper
      ref="mainSwiper"
      :modules="modules"
      :slides-per-view="1"
      :space-between="10"
      :loop="true"
      :centered-slides="true"
      :navigation="true"
      :thumbs="{ swiper: thumbsSwiper }"
      class="mainSwiper"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <img :src="slide.imgSrc"/>
      </swiper-slide>
    </swiper>

    <!-- 缩略图轮播 -->
    <swiper
      ref="thumbsSwiper"
      :modules="modules"
      :slides-per-view="4"
      :space-between="10"
      :free-mode="true"
      watch-slides-progress
      class="thumbsSwiper"
    >
      <swiper-slide v-for="(thumb, idx) in thumbnails" :key="idx">
        <img :src="thumb.thumbnailSrc"/>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import {
  Navigation,
  Thumbs,
} from 'swiper/modules';

// 声明使用的模块列表
const modules = [Navigation, Thumbs];

// 初始化两个 swiper 对象引用
let mainSwiper = null;
let thumbsSwiper = null;

onMounted(() => {
  const elMainSwiper = document.querySelector('.mainSwiper');
  const elThumbsSwiper = document.querySelector('.thumbsSwiper');

  if (elMainSwiper && elThumbsSwiper) {
    mainSwiper = new Swiper(elMainSwiper);
    thumbsSwiper = new Swiper(elThumbsSwiper);

    // 关联主轮播与缩略图轮播
    mainSwiper.controller.control = thumbsSwiper;
    thumbsSwiper.controller.control = mainSwiper;
    
    // 设置缩略图模式
    mainSwiper.thumbs.swiper = thumbsSwiper;
  }
});

defineProps<{
  slides: Array<{ imgSrc: string }>;
  thumbnails: Array<{ thumbnailSrc: string }>;
}>();
</script>

<style scoped>
/* 自定义样式 */
.mainSwiper {
  height: 80vh;
}

.thumbsSwiper .swiper-slide {
  opacity: 0.4;
}
.thumbsSwiper .swiper-slide-thumb-active {
  opacity: 1;
}
</style>

上述模板展示了如何设置一个包含两组滑动视图的布局——一组用于显示大尺寸图像作为主要内容，另一组则呈现较小版本的小图标供用户浏览选择。当点击某个小图标时，对应的大图将在上方自动切换至中心位置[^1]。