nuxt swiper带缩略图

要在 Nuxt 中使用带缩略图的 Swiper 组件，你需要安装 `swiper` 和 `vue-awesome-swiper` 两个依赖包。然后在你的 Nuxt 项目中，可以按照以下步骤实现带缩略图的 Swiper。

1. 安装依赖

npm install swiper vue-awesome-swiper --save

2. 在 Nuxt 中引入 Swiper

在 `nuxt.config.js` 文件中加入以下配置：

module.exports = {
  // ...
  build: {
    vendor: ['swiper']
  },
  // ...
  plugins: [
    {src: '~/plugins/vue-awesome-swiper', ssr: false}
  ],
  // ...
}

这段代码会把 Swiper 加入到 Nuxt 的 vendor 中，并且在客户端运行时加载 `vue-awesome-swiper` 插件。

3. 创建带缩略图的 Swiper 组件

在你的 Vue 单文件组件中，添加以下代码：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(image, index) in images" :key="index">
        <img :src="image.url" :alt="image.alt">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-thumbs-container">
      <div class="swiper-thumbs-wrapper">
        <div class="swiper-thumb" v-for="(image, index) in images" :key="index">
          <img :src="image.thumbUrl" :alt="image.alt">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          url: 'https://placeimg.com/640/480/any',
          thumbUrl: 'https://placeimg.com/100/100/any',
          alt: 'Image 1',
        },
        {
          url: 'https://placeimg.com/640/480/nature',
          thumbUrl: 'https://placeimg.com/100/100/nature',
          alt: 'Image 2',
        },
        {
          url: 'https://placeimg.com/640/480/tech',
          thumbUrl: 'https://placeimg.com/100/100/tech',
          alt: 'Image 3',
        },
      ],
    }
  },
  mounted() {
    const swiper = this.$refs.swiper.$swiper
    const thumbsSwiper = this.$refs.thumbsSwiper.$swiper

    swiper.controller.control = thumbsSwiper
    thumbsSwiper.controller.control = swiper
  },
}
</script>

<style>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-thumbs-container {
  margin-top: 10px;
}

.swiper-thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.swiper-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.swiper-thumb-active img {
  border-color: #333;
}
</style>

这段代码会创建一个带缩略图的 Swiper 组件，并且通过 `controller.control` 属性实现主 Swiper 和缩略图 Swiper 的交互。

4. 在页面中使用 Swiper 组件

在你的页面中，使用以下代码引入刚才创建的 Swiper 组件：

<template>
  <div>
    <swiper :options="swiperOptions" ref="swiper">
      <!-- Swiper slides -->
    </swiper>
    <div class="swiper-thumbs">
      <swiper :options="thumbOptions" ref="thumbsSwiper">
        <!-- Swiper thumbs -->
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      },
      thumbOptions: {
        slidesPerView: 3,
        spaceBetween: 10,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
      }
    }
  },
}
</script>

<style>
.swiper-thumbs {
  margin-top: 20px;
}
</style>

这段代码会在你的页面中使用刚才创建的 Swiper 组件，并且通过 `options` 属性传递 Swiper 配置参数。同时，缩略图 Swiper 组件也被嵌套在主 Swiper 组件中。

这样就可以实现在 Nuxt 中使用带缩略图的 Swiper 组件了。