nuxt Swiper缩略图控制实例

在 Nuxt 项目中使用 Swiper 缩略图控制可以通过以下步骤实现：

1. 安装 Swiper 和 Swiper Vue 模块：

   npm install swiper swiper/vue

2. 在 `nuxt.config.js` 中引入 Swiper 样式：

   css: [
     'swiper/css/swiper.css'
   ],

3. 在需要使用 Swiper 的页面中引入 Swiper 和 Swiper Vue 组件：

   <template>
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(item, index) in list" :key="index">
           <img :src="item.image" />
         </div>
       </div>
       <div class="swiper-pagination"></div>
     </div>
   
     <div class="swiper-container-thumbnails">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(item, index) in list" :key="index">
           <img :src="item.image" />
         </div>
       </div>
     </div>
   </template>
   
   <script>
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import SwiperCore, { Pagination, Thumbs } from 'swiper/core';
   
   SwiperCore.use([Pagination, Thumbs]);
   
   export default {
     components: {
       Swiper,
       SwiperSlide,
     },
     data() {
       return {
         list: [
           {
             image: 'https://dummyimage.com/600x400/000/fff',
           },
           {
             image: 'https://dummyimage.com/600x400/000/fff',
           },
           {
             image: 'https://dummyimage.com/600x400/000/fff',
           },
         ],
       };
     },
     mounted() {
       const swiper = new Swiper('.swiper-container', {
         loop: true,
         pagination: {
           el: '.swiper-pagination',
           clickable: true,
         },
         thumbs: {
           swiper: {
             el: '.swiper-container-thumbnails',
             slidesPerView: 3,
             spaceBetween: 10,
           },
         },
       });
     },
   };
   </script>

4. 根据需求自定义样式。

上述代码中，我们使用了 `Swiper`、`SwiperSlide`、`Pagination` 和 `Thumbs` 组件，其中 `Swiper` 和 `SwiperSlide` 是 Swiper Vue 官方提供的组件，`Pagination` 和 `Thumbs` 是 Swiper 的核心模块。在 `mounted` 钩子函数中，我们初始化了一个 Swiper 实例，并配置了循环播放、分页器以及缩略图。其中缩略图的配置项 `swiper` 对应的是缩略图 Swiper 实例的配置项，我们可以根据需求自行设置。在 HTML 中，我们分别定义了一个 Swiper 容器和一个缩略图容器，并通过 `v-for` 循环渲染图片。需要注意的是，两个容器的类名不能重复，并且需要在 Swiper 实例的配置项中正确引用。

最后，我们可以根据需求自定义 Swiper 和缩略图容器的样式，例如修改容器宽度、高度、背景色等。