swiper，vue-awesome-swiper缩略图轮播

以下是使用vue-awesome-swiper实现缩略图轮播的示例代码：

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

<script>
import 'swiper/css/swiper.css'
import { Swiper, Pagination, Scrollbar, Thumbs } from 'swiper/js/swiper.esm'

Swiper.use([Pagination, Scrollbar, Thumbs])

export default {
  data() {
    return {
      list: [
        { imgUrl: 'https://picsum.photos/id/1018/500/300' },
        { imgUrl: 'https://picsum.photos/id/1015/500/300' },
        { imgUrl: 'https://picsum.photos/id/1019/500/300' },
        { imgUrl: 'https://picsum.photos/id/1020/500/300' },
        { imgUrl: 'https://picsum.photos/id/1021/500/300' }
      ]
    }
  },
  mounted() {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination'
      },
      scrollbar: {
        el: '.swiper-scrollbar'
      },
      thumbs: {
        swiper: {
          el: '.thumbnail',
          slidesPerView: 4,
          spaceBetween: 10,
          watchSlidesVisibility: true,
          watchSlidesProgress: true
        }
      }
    })
  }
}
</script>

<style>
.thumbnail .swiper-slide {
  opacity: 0.4;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.thumbnail .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1);
}
</style>

在这个示例中，我们使用了vue-awesome-swiper插件来实现轮播效果，并使用了thumbs选项来实现缩略图轮播。具体来说，我们在Swiper的配置中添加了thumbs选项，并在其中配置了一个新的Swiper实例，用于显示缩略图。我们还通过watchSlidesVisibility和watchSlidesProgress选项来确保缩略图与主轮播图同步。