CODEWITHSUNDEEP
swiper.js
fabio
fabio

Reputation: 634

Is it possible to coordinate the sliding of two swiper instance?

I have two Swiper instance in the same page:

var swiper = new Swiper('.slider-slider', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
    autoplay: 8000,
    paginationType:'bullets',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (swiper,index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
});
var swiper2 = new Swiper('.slider2-slider', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
    autoplay: 8000,
    paginationType:'bullets',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (swiper,index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';

    }

});

is it possible to coordinates the two sliders so when the user click on a pagination bullet of one of the two slider also the second one moves accordingly ?

Upvotes: 0

Views: 1438

Answers (1)

fabio
fabio

Reputation: 634

I resolved the issu using the functoin onSlideChange in each instance of Swiper:

var swiper = new Swiper('.slider-slider', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
autoplay: 8000,
paginationType:'bullets',
pagination: '.swiper-pagination',
paginationClickable: true,
onSlideChangeEnd: function (s) {
        swiper2.slideTo(swiper.activeIndex);
    },
paginationBulletRender: function (swiper,index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
var swiper2 = new Swiper('.slider2-slider', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
autoplay: 8000,
paginationType:'bullets',
pagination: '.swiper-pagination',
paginationClickable: true,
onSlideChangeEnd: function (s) {
        swiper.slideTo(swiper2.activeIndex);
    }
paginationBulletRender: function (swiper,index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';

}

});

Upvotes: 1

Related Questions