Swiper中文论坛

标题: 调用swiper4，缩略图thumbs显示问题 [打印本页]

作者: 余温无痕 时间: 2019-6-28 15:15
标题: 调用swiper4，缩略图thumbs显示问题

<div class="swiper-container" id="gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/f1.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f2.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f3.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f4.jpg" />
</div>
<div class="swiper-slide">
<img src="images/n1.jpg" />
</div>
</div>

<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container" id="gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/f1.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f2.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f3.jpg" />
</div>
<div class="swiper-slide">
<img src="images/f4.jpg" />
</div>
<div class="swiper-slide">
<img src="images/n1.jpg" />
</div>
</div>
</div>

js:

var galleryThumbs = new Swiper('#gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('#gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
}
});

css:

.swiper-slide {
background-size: cover;
background-position: center;
}
#gallery-top {
height: 80%;
width: 100%;
}
#gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
#gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
#gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}

PS：按照官网上Demo调用，问题就是在于swiper跟thumbs没有关联在一起，不知道是哪里出问题了,红框是我勾选出来了，这个没有像官网上demo一样，点击大图切换，缩略图也会跟着动，我这个为什么是两个单独分开的，关联不在一起？？？

作者: 余温无痕 时间: 2019-6-28 15:17
顶顶顶顶顶

作者: hamofeng 时间: 2019-6-28 18:21
非常不错谢谢

作者: admin 时间: 2019-6-28 20:39
照着demo搞

作者: wslghy 时间: 2019-8-22 16:03
鼠标滑上去切换图片怎么实现

作者: 沙琪玛 时间: 2019-9-17 11:46
我用的4.5.1版本会有这个问题，改用4.5.0版本解决

作者: LZQCN 时间: 2019-9-19 10:12

沙琪玛发表于 2019-9-17 11:46
我用的4.5.1版本会有这个问题，改用4.5.0版本解决

感谢，问题已解决

作者: cf1276132782 时间: 2021-4-25 16:15
cff方法嗲所说的菜市场

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)