nuxt swiper 缩略图控制

要在 Nuxt 中使用 Swiper 控件，并控制缩略图，可以按照以下步骤进行操作：

1. 首先，您需要安装 Swiper 和 Swiper vue 组件。可以使用以下命令进行安装：

npm install swiper vue-awesome-swiper

2. 在 Nuxt 项目中的 nuxt.config.js 中添加以下代码：

module.exports = {
  ...
  build: {
    babel: {
      presets: [['@nuxt/babel-preset-app', { corejs: { version: 3 } }]],
    },
  },
  ...
}

这是为了确保 Swiper 可以在 Nuxt 项目中正常工作。

3. 在您的 Vue 组件中，您需要导入 Swiper 和 Swiper vue 组件，然后将它们添加到您的组件中。例如：

<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <img :src="slide.image" />
      </swiper-slide>
      <div class="swiper-pagination"></div>
    </swiper>

    <div class="swiper-thumbs">
      <swiper :options="thumbsSwiperOptions" class="swiper-container">
        <swiper-slide v-for="(slide, index) in slides" :key="index">
          <img :src="slide.image" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      },
      thumbsSwiperOptions: {
        spaceBetween: 10,
        slidesPerView: 4,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      slides: [
        {
          image: 'https://picsum.photos/id/1018/800/600',
        },
        {
          image: 'https://picsum.photos/id/1015/800/600',
        },
        {
          image: 'https://picsum.photos/id/1019/800/600',
        },
        {
          image: 'https://picsum.photos/id/1016/800/600',
        },
        {
          image: 'https://picsum.photos/id/1017/800/600',
        },
      ],
    }
  },
}
</script>

在上面的代码中，我们创建了一个 Swiper 控件，并使用 `swiperOptions` 对其进行配置。我们还创建了一个缩略图 Swiper，它使用 `thumbsSwiperOptions` 进行配置。这里的关键是要将 `watchSlidesVisibility` 和 `watchSlidesProgress` 设置为 true，以确保缩略图 Swiper 能够正确地与主 Swiper 进行交互。

还要注意，在上述代码中，我们在 `Swiper` 和 `SwiperSlide` 组件中使用了 `vue-awesome-swiper` 模块，因为这个模块提供了更好的 Nuxt 集成。此外，我们还导入了 Swiper 的 CSS 文件，确保它们可以正确地呈现。

希望这可以帮助您控制 Swiper 缩略图！