CODEWITHSUNDEEP
javascriptjqueryswiper.js
Tanasos
Tanasos

Reputation: 4098

swiper.js controlling two instances

So I have setup two swiper.js instances and I want to scroll both while using one of them.

EDIT: My main goal is to recreate the main functionality on top of the swiper homepage.

EDIT2: I found this link, but it appears that this uses an older version of swiper.

Here is my config, only the first one works.

$(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;

})

What am I doing wrong, and how to fix it?

Fiddle

Upvotes: 2

Views: 1792

Answers (2)

vaxul
vaxul

Reputation: 503

For documentation reasons.

For this case the main difference in switching from Swiper v3 to v4 is to omit the .params. So instead of

mySwiper.params.control

without params and the new API

mySwiper.controller.control

Upvotes: 0

Davide Perozzi
Davide Perozzi

Reputation: 386

I think the main problem here was the outdated swiper.js version. Updated to 4.3.2.

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

Upvotes: 2

Related Questions