vue3 使用swiper制作带缩略图的轮播图

效果图

实现代码

<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>