vue实现带缩略图的轮播图

可以使用vue-awesome-swiper插件来实现带缩略图的轮播图。

1. 首先安装vue-awesome-swiper插件。

npm install vue-awesome-swiper --save

2. 在Vue组件中引入插件。

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

Vue.use(VueAwesomeSwiper)

3. 在组件模板中使用轮播图。

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

<script>
export default {
  data() {
    return {
      swiperList: [
        {
          imgUrl: 'https://picsum.photos/id/1/500/300'
        },
        {
          imgUrl: 'https://picsum.photos/id/2/500/300'
        },
        {
          imgUrl: 'https://picsum.photos/id/3/500/300'
        }
      ]
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination'
      },
      thumbs: {
        swiper: {
          el: '.swiper-container-thumbs',
          slidesPerView: 3,
          spaceBetween: 10,
          loop: true,
          freeMode: true,
          loopedSlides: 5,
          watchSlidesVisibility: true,
          watchSlidesProgress: true
        }
      }
    })
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-container-thumbs {
  margin-top: 10px;
  width: 100%;
  height: 80px;
}

.swiper-container-thumbs .swiper-slide {
  width: 80px;
  height: 80px;
}

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

其中，`swiperList`为轮播图数据，可以根据需求修改。`swiper-container`和`swiper-pagination`分别为轮播图和分页器的容器，`swiper-container-thumbs`为缩略图容器。

在`mounted`钩子函数中，使用`new Swiper()`创建轮播图实例，并通过`thumbs`选项实现缩略图功能。具体的配置可以参考官方文档。