因此,我设置了两个swiper.js实例,并且想在使用其中一个时同时滚动它们。
编辑:我的主要目标是在刷卡器首页的顶部重新创建主要功能。
EDIT2:我找到了this link,但似乎它使用了较旧版本的swiper。
这是我的配置,只有第一个有效。
$(document).ready(function () {
//initialize swiper when document ready
var swiperFront = new Swiper('.swiper-container-front', {
// Optional parameters
effect: 'coverflow',
centeredSlides: true,
direction: 'horizontal',
slidesPerView: '3',
loop: false,
followFinger: true,
controller: {
control: [swiperFront, swiperBack],
by: 'container',
}
});
var swiperBack = new Swiper('.swiper-container-back', {
// Optional parameters
effect: 'fade',
centeredSlides: true,
slidesPerView: '3',
loop: false,
});
swiperFront.params.controller.control = swiperBack;
swiperBack.params.controller.control = swiperFront;
})
我在做什么错,以及如何解决?
Fiddle
最佳答案
我认为这里的主要问题是过时的swiper.js
版本。更新为4.3.2
。
jsfiddle:https://jsfiddle.net/ajxmyL7v/