我在其中一页中使用https://idangero.us/swiper/api/。我想要达到的目的是要有一个带有缩略图以及导航箭头的滑块。一切正常,但是,一旦我将图像拖动到下一个滑块,导航箭头将无法正常工作。
<div class="floorplan-container floorplan-set tab-container">
<div class="swiper-wrapper">
<div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
</div>
<div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
</div>
<div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
</div>
<div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
</div>
</div>
</div>
JS
var thumbOptions = {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 5,
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 8,
init: false,
watchSlidesVisibility: true,
watchSlidesProgress: true,
freeMode: true,
}
var galleryThumbs = new Swiper(".gallery-thumbs", thumbOptions)
var containerOptions = {
grabCursor: true,
spaceBetween: 10,
loop: true,
loopedSlides: 8,
navigation: {
nextEl: ".paging.right",
prevEl: ".paging.left"
},
observer: true,
observeParents: true,
init: false,
pagination: {
clickable: true
},
preventClicks: false,
preventClicksPropagation: false,
observer: true,
observeParents: true,
on: {
touchEnd: function(sw, e) {
swiperAllowClick = true;
console.log(galleryContainer);
}
}
}
var galleryContainer = new Swiper(".gallery-container", containerOptions)
galleryContainer.controller.control = galleryThumbs
galleryThumbs.controller.control = galleryContainer
galleryContainer.init()
galleryThumbs.init()
不胜感激