调用swiper4，缩略图thumbs显示问题

余温无痕 · 发表于 2019-6-28 15:15:27

<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一样，点击大图切换，缩略图也会跟着动，我这个为什么是两个单独分开的，关联不在一起？？？