Layui|Swiper点击图片切换图片联动 CSS|jQuery

上图(在线查看) 【Layui|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) }