Question

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

    }

});

是否可以协调两个滑块，以便当用户点击两个滑块之一的分页子弹时，第二个滑块也相应移动？

Answer 1

我在每个Swiper实例中使用functoin onSlideChange解决了issu：

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

}

});

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

1 个答案: