先看效果图

QQ截图20230629152700.png

html代码部分

<div class="productsfocus">
     <div class="swiper productsfocussmall">
        <div class="swiper-wrapper">
            {loop $thumb $i $c}
            <div class="swiper-slide"><img class="img-fluid" src="{dr_thumb($c)}" alt="{$title}" loading="lazy" decoding="async"/></div>
            {/loop}
        </div>
    </div>
    <div class="swiper productsfocusbig">
        <div class="swiper-wrapper">
            {loop $thumb $i $c}
            <div class="swiper-slide"><img class="img-fluid" src="{dr_thumb($c)}" alt="{$title}" loading="lazy" decoding="async"/></div>
             {/loop}
        </div>
    </div>
</div>

JS部分(图片最多不超过4张)

<script>
            var thumbnailContainer = document.querySelector('.productsfocusbig .swiper-container')
            var thumbnailSlides = document.querySelectorAll('.productsfocusbig .swiper-slide')
            if (thumbnailSlides.length > 0) {
                var numOfImages = thumbnailSlides.length
                var thumbnailSlidesPerView = numOfImages <= 3 ? numOfImages : 4
                var loopEnabled = numOfImages > thumbnailSlidesPerView
                var swiper = new Swiper('.productsfocusbig', {
                    loop: loopEnabled,
                    spaceBetween: 10,
                    slidesPerView: thumbnailSlidesPerView,
                    freeMode: true,
                    watchSlidesProgress: true,
                })
                if (numOfImages === 1) {
                    swiper.allowSlidePrev = false
                    swiper.allowSlideNext = false
                }
            }
            var swiper2 = new Swiper('.productsfocussmall', {
                loop: true,
                spaceBetween: 10,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                thumbs: {
                    swiper: swiper,
                },
            })
</script>

CSS部分（根据自己项目需求改写）

.productsfocus .swiper-slide {
    background-size: cover;
    background-position: center;
}

.productsfocussmall {
    height: auto;
    width: 100%;
}

.productsfocusbig {
    height: auto;
    box-sizing: border-box;
    padding: 10px 2px;
    padding-top: 15px !important;
}

/* .productsfocusbig .swiper-slide {
    width: 25%;
    opacity: 0.4;
} */

.productsfocusbig .swiper-slide-thumb-active {
    position: relative;
    /* opacity: 1; */
    border: 3px solid var(--color-orange-1);
    background: var(--color-orange-1);
}

.productsfocusbig .swiper-slide-thumb-active::after {
    position: absolute;
    content: '';
    z-index: 99;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-orange-1);
}

.productsfocusbig .swiper-slide {
    width: 86px !important; /* 统一宽度 */
    height: 86px !important; /* 统一高度 */
    position: relative;
    display: flex; /* 垂直居中图片 */
    justify-content: center;
    align-items: center;
}

.productsfocusbig .swiper-slide img {
    max-width: 100%;
    max-height: auto;
    object-fit: contain; /* 调整图片适应容器，不改变图片宽高比 */
}

.productsfocus .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.swiper-slide-hidden {
    display: none !important;
}