是否可以协调两个 swiper 实例的滑动？答案

【问题标题】：Is it possible to coordinate the sliding of two swiper instance?是否可以协调两个 swiper 实例的滑动？
【发布时间】：2016-10-27 15:01:27
【问题描述】：

我在同一页面中有两个 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,
    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>';

    }

});

是否可以协调两个滑块，所以当用户点击两个滑块之一的分页项目符号时，第二个滑块也会相应移动？

【问题讨论】：

标签： swiper

【解决方案1】：

我在每个 Swiper 实例中使用函数 onSlideChange 解决了这个问题：

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

}

});

【讨论】：