之前发布一个，但感觉自定义代码有点多，又重新弄了一个，懂的都懂，大家将就看吧，希望能帮到大家。
先上一张效果图看看
QQ截图20231113164958.jpg
直接贴代码了(里面的bulma框架可以略过，主要是想看下响应式情况下的效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swiper 缩略图</title>
<link crossorigin="anonymous" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" href="https://lib.baomitu.com/bulma/0.9.4/css/bulma.min.css" rel="stylesheet">
<link crossorigin="anonymous" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" href="https://lib.baomitu.com/Swiper/11.0.4/swiper-bundle.min.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-/LKHQ9K9yatyOfEKXiysc9SPCpF6xkvfHQxtPkhdKS83GvfyIWDwKaOr3/LqVxbEX89Bqz+SbMHEPWm0AeRWnA==" src="https://lib.baomitu.com/Swiper/11.0.4/swiper-bundle.min.js"></script>
<style>
html,
body {
position: relative;
height: 100%;
}
.thumbnail {
padding: 20px;
border: 1px solid #ddd;
}
.thumbnailsmall {
padding: 10px 2px 6px;
}
.thumbnail .swiper-free-mode>.swiper-wrapper {
justify-content: center;
}
.thumbnailsmall .swiper-slide {
opacity: 0.6;
cursor: pointer;
padding: 2px;
background: #fff;
}
.thumbnailsmall .swiper-slide-thumb-active {
opacity: 1;
position: relative;
background: #213152;
}
.thumbnailsmall .swiper-slide-thumb-active::after {
position: absolute;
content: "";
top: -6px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #213152;
}
.thumbnail .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.thumbnail .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="mx-2">
<div class="columns">
<div class="column is-6">
<div class="thumbnail">
<div class="swiper thumbnailbig">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://ucarecdn.com/42dc8c54-2315-453f-9b40-07e332b8ee39/-/stretch/off/-/resize/760x/" />
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/798aa641-01fe-4ed2-886b-bac818c5fdfc/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/eaaee377-f1b5-49d7-a7db-d7a1f86b2805/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/35ce83fa-eac1-4326-83e9-e445450b35ce/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/9e7211c0-b73b-4b1d-8b47-4b1700f9a80f/-/stretch/off/-/resize/760x/"
/>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper thumbnailsmall">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://ucarecdn.com/42dc8c54-2315-453f-9b40-07e332b8ee39/-/stretch/off/-/resize/760x/" />
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/798aa641-01fe-4ed2-886b-bac818c5fdfc/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/eaaee377-f1b5-49d7-a7db-d7a1f86b2805/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/35ce83fa-eac1-4326-83e9-e445450b35ce/-/stretch/off/-/resize/760x/"
/>
</div>
<div class="swiper-slide">
<img
src="https://ucarecdn.com/9e7211c0-b73b-4b1d-8b47-4b1700f9a80f/-/stretch/off/-/resize/760x/"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".thumbnailsmall", {
loop: true,
spaceBetween: 4,
slidesPerView: 6,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".thumbnailbig", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
var swiperSlideCount = $('.thumbnailbig .swiper-slide').length;
if (swiperSlideCount === 1) {
$('.thumbnailsmall').remove();
}
</script>
</body>
</html>
