nuxt swiper缩略图

要在 Nuxt 中使用 Swiper 缩略图，您可以按照以下步骤操作：

1. 安装 Swiper 和 Swiper 的 Vue 组件：

   npm install swiper vue-awesome-swiper

2. 在您的 Nuxt 项目中创建一个全局的 Swiper 组件，例如在 `plugins/swiper.js` 中：

   import Vue from 'vue'
   import VueAwesomeSwiper from 'vue-awesome-swiper'

   // 引入 Swiper 样式
   import 'swiper/css/swiper.css'

   // 注册 Swiper 组件
   Vue.use(VueAwesomeSwiper)

3. 在页面中使用 Swiper 组件和缩略图组件：

   <template>
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(item, index) in items" :key="index">
           <img :src="item.img" :alt="item.alt">
         </div>
       </div>
       <div class="swiper-pagination"></div>
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       <div class="swiper-container thumbnail">
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="(item, index) in items" :key="index">
             <img :src="item.img" :alt="item.alt">
           </div>
         </div>
       </div>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         items: [
           { img: 'https://placekitten.com/1000/600', alt: 'Kitten 1' },
           { img: 'https://placekitten.com/1000/601', alt: 'Kitten 2' },
           { img: 'https://placekitten.com/1000/602', alt: 'Kitten 3' },
           { img: 'https://placekitten.com/1000/603', alt: 'Kitten 4' },
           { img: 'https://placekitten.com/1000/604', alt: 'Kitten 5' },
         ],
       }
     },
     mounted() {
       // 初始化 Swiper
       this.$nextTick(() => {
         new this.$swiper('.swiper-container', {
           pagination: {
             el: '.swiper-pagination',
           },
           navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
           },
           thumbs: {
             swiper: {
               el: '.thumbnail',
               slidesPerView: 5,
               spaceBetween: 10,
               breakpoints: {
                 640: {
                   slidesPerView: 3,
                   spaceBetween: 5,
                 },
               },
             },
           },
         })
       })
     },
   }
   </script>

   <style>
   .thumbnail {
     margin-top: 10px;
   }

   .thumbnail .swiper-slide {
     width: 80px;
     height: 60px;
   }

   .thumbnail .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   </style>

在这个例子中，我们创建了一个包含缩略图的 Swiper。我们首先定义了一个包含 `img` 和 `alt` 属性的数据数组。然后，我们在 Swiper 的 `thumbs` 选项中定义了一个新的 Swiper 实例，它将作为缩略图。我们还使用了 `slidesPerView` 和 `spaceBetween` 属性来定义缩略图的大小和间隔。最后，我们使用 `$nextTick` 方法来确保在 Swiper 实例化之后再初始化它。