Swiper中文论坛

标题: 怎么样才能让thumbs同时控制两个swiper呢 [打印本页]

作者: dztxiansen 时间: 2021-12-30 16:00
标题: 怎么样才能让thumbs同时控制两个swiper呢
var thumbsslider = new Swiper(".thumbsslider", {
spaceBetween: 10,
slidesPerView: 10,
freeMode: true,
watchSlidesProgress: true,
});
var txtswiper = new Swiper(".txtswiper", {
loop: true,
speed: 1000,
grabCursor: true,
watchSlidesProgress: true,
mousewheelControl: true,
keyboardControl: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
type: "progressbar",
},

thumbs: {
swiper: thumbsslider,

}
});
var solutionpic = new Swiper(".solutionpic", {
loop: true,
speed: 1000,

watchSlidesProgress: true,

navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
type: "progressbar",
},
on: {
progress: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function(swiper, speed) {
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
},
thumbs: {
swiper: thumbsslider,

}
});

目前这样的话，谁在前面就能控制谁，后面的就不行了

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