效果图
![](https://i-blog.csdnimg.cn/direct/2b02218e46da40eab8954524e8868fbd.png)
实现代码
<template>
<div class="wrap">
<!-- 主轮播图 -->
<swiper :style="{
'--swiper-navigation-color': '#fff',
'--swiper-pagination-color': '#fff',
}" :modules="modules" :navigation="true" :thumbs="{ swiper: thumbsSwiper }">
<SwiperSlide v-for="slide in slides" :key="slide">
<img style="width: 300px" :src="slide" alt="main slide" />
</SwiperSlide>
</swiper>
<!-- 缩略轮播图 -->
<swiper @swiper="setThumbsSwiper"
:spaceBetween="10"
:slidesPerView="3"
:freeMode="true"
:watchSlidesProgress="true"
:modules="modules"
class="thumbsSwiper">
<SwiperSlide v-for="slide in slides" :key="slide">
<img style="width: 100px" :src="slide" alt="main slide" />
</SwiperSlide>
</swiper>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
const slides = ref(['https://temp.im/200x200/4CD964/fff', 'https://temp.im/200x200/999999/fff', 'https://temp.im/200x200/666666/fff', 'https://temp.im/200x200/9696ff/fff','https://temp.im/200x200/696969/fff', 'https://temp.im/200x200/333333/fff']);
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
thumbsSwiper.value = swiper;
};
const modules = [FreeMode, Navigation, Thumbs];
</script>
<style lang="scss" scoped>
.wrap {
width: 300px;
background: #000;
position: relative;
}
.thumbsSwiper {
.swiper-slide {
opacity: 0.4;
}
.swiper-slide-thumb-active {
opacity: 1;
}
}
</style>
swiper官网地址
https://swiperjs.com/vue