nuxt swiper缩略图控制切换

你可以使用 Swiper 的 thumbs 插件来实现缩略图控制切换。

首先，在你的 Nuxt 项目中安装 Swiper 和 Swiper thumbs：

npm install swiper --save
npm install swiper/dist/js/swiper.min.js --save
npm install swiper/dist/css/swiper.min.css --save
npm install swiper/dist/js/swiper.min.js --save

然后，在你的页面组件中引入 Swiper：

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

接下来，在 mounted 钩子中初始化 Swiper 和 thumbs：

mounted() {
  const galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });
  const galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    thumbs: {
      swiper: galleryThumbs,
    },
  });
}

在这段代码中，我们使用了两个 Swiper 实例：一个是 `.gallery-thumbs`，用来显示缩略图，另一个是 `.gallery-top`，用来显示大图。我们通过 thumbs 配置选项将两个实例关联起来。

最后，在模板中添加 HTML 和 CSS 代码来显示图片和缩略图：

<div class="gallery-top swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="path/to/image1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/image2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/image3.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/image4.jpg" alt=""></div>
  </div>
</div>
<div class="gallery-thumbs swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="path/to/thumb1.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/thumb2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/thumb3.jpg" alt=""></div>
    <div class="swiper-slide"><img src="path/to/thumb4.jpg" alt=""></div>
  </div>
</div>

.gallery-top, .gallery-thumbs {
  width: 100%;
  height: 100%;
}

.gallery-top .swiper-slide {
  width: 100%;
  height: 100%;
}

.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
}

这样，你就可以在 Nuxt 中使用 Swiper thumbs 插件来实现缩略图控制切换了。