Ist es möglich, das Verschieben von zwei Swiper-Instanzen zu koordinieren?

Question

Ich habe zwei swiper Instanz in der gleichen Seite:

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>'; 

    } 

}); 

ist es möglich, so die beiden Schieberegler, um Koordinaten, wenn der Anwender auf eine Paginierung Kugel von einem der beiden Schieber auch die zweite entsprechend bewegt?

Answer 1

ich beschlossen, das issue den functoin onSlideChange jeweils von swiper mit:

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>'; 

} 

});