Swiper点击图片切换图片联动

上图(在线查看)

两步：
① css中用hide:after/before定义伪类样式
② js操作移除/添加
我的那里用到一个active是审查元素拿到swiper插件自带的，目的是为了反向联动，即当切换大图，小图阴影跟着变化

1.HTML

2. js

$(function () {
    var thumbsSwiper = new Swiper('#thumbsSwiper', {
        spaceBetween: 10,
        slidesPerView: 4,
        watchSlidesVisibility: true, //防止不可点击
    })
    var bigSwiper = new Swiper('#bigSwiper', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        spaceBetween: 10,
        thumbs: {
            swiper: thumbsSwiper,
        },
    })


    $("#thumbsSwiper .swiper-slide").addClass("hide")
    $("#thumbsSwiper .swiper-slide").click(function(){
        $(this).removeClass("hide").siblings().addClass("hide")
    })
})

3. css

#bigSwiper .swiper-slide img {
    width: 100%;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background: none;
}

#thumbsSwiper {
    background: rgba(0, 0, 0, .3);
    height: 7.2rem;
    padding: 2%;
    text-align: center;
}

#thumbsSwiper .swiper-slide {
    position: relative;
}

.hide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7)
}

#thumbsSwiper .swiper-slide img {
    width: 100%;
}

.swiper-slide-thumb-active {
    position: relative;
}

.swiper-slide-thumb-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0)
}