nuxt swiper 缩略图控制 显示五个自动播放

你可以使用 `swiper` 插件中的 `thumbs` 属性来实现缩略图控制，并使用 `autoplay` 属性来实现自动播放，如下所示：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-container-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="thumbnail1.jpg"></div>
        <div class="swiper-slide"><img src="thumbnail2.jpg"></div>
        <div class="swiper-slide"><img src="thumbnail3.jpg"></div>
        <div class="swiper-slide"><img src="thumbnail4.jpg"></div>
        <div class="swiper-slide"><img src="thumbnail5.jpg"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';

  export default {
    mounted() {
      const mySwiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
          delay: 5000, // 自动播放间隔
        },
        thumbs: {
          swiper: {
            el: '.swiper-container-thumbs',
            slidesPerView: 5, // 显示缩略图的数量
            spaceBetween: 10, // 缩略图之间的间距
            autoplay: {
              delay: 5000, // 缩略图自动播放间隔
            },
          },
        },
      });
    },
  };
</script>

<style>
  .swiper-container-thumbs {
    margin-top: 10px;
  }
  .swiper-container-thumbs .swiper-slide {
    width: 20%;
    height: auto;
  }
  .swiper-container-thumbs .swiper-slide img {
    width: 100%;
    height: auto;
  }
</style>

这里使用 `swiper-container-thumbs` 包含缩略图的轮播图，使用 `thumbs` 属性配置缩略图相关的参数，如 `slidesPerView` 控制缩略图显示数量，`spaceBetween` 控制缩略图之间的距离。同时在 `thumbs.swiper` 中使用 `autoplay` 属性设置缩略图自动播放。