swiper.js 控制两个实例

Question

所以我设置了两个 swiper.js 实例，我想在使用其中一个的同时滚动这两个实例。

编辑：我的主要目标是在 swiper 主页上重新创建主要功能。

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

Answer 1

我认为这里的主要问题是过时的 swiper.js 版本。已更新为 4.3.2。

jsfiddle: https://jsfiddle.net/ajxmyL7v/

Answer 2

出于文档原因。

对于这种情况，从 Swiper v3 切换到 v4 的主要区别是省略了 .params。所以而不是

mySwiper.params.control

没有参数和新的 API

mySwiper.controller.control

swiper.js 控制两个实例

swiper.js controlling two instances

javascript

jquery

swiper