swiper缩略图轮播

使用vue3+ts完成swiper缩略图的效果，起初以为这个swiper是一个组件就可以完成，但现实是两个swiper做了属性互调，官网上没有描述清楚缩略图是否可以轮播，导致走了很多弯路（获取上图的实例然后操作swiper使其完成走马灯的效果）

1.安装并引入

yarn

复制代码

yarn add swiper // 安装swiper依赖

2.在main.ts中引入他的css文件

js

复制代码

import "swiper/css"

3.在你所需的页面中引入

js

复制代码

<template> <div style="height: 100vh; overflow: hidden"> <swiper class="swiper mySwiper2" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" :loop="true" :autoplay="true" :navigation="true" > <swiper-slide v-for="(item, index) of slides" :key="index"> <img class="img" :src="item" @click="toDetail" /> </swi