Question

我在页面上有两个Swipers，它们是链接和同步的。两者都是循环播放并显示约60张幻灯片（长度是动态的）。两个Swipers都有分页功能，只需点击“下一步”即可。和之前的＆＃39;按钮（.swipePrev（）和.swipeNext（））。

第一个Swiper只显示一个大图像，第二个是带缩略图的旋转木马（显示活动的一个，前两个和下两个幻灯片）。当我在任何一个页面上页时，活动索引会更新，活动幻灯片以小图片为中心，大图像也会更新。

我现在想要添加功能，以便在我点击轮播中的幻灯片时更新两个滑块。我在旋转木马上添加了以下代码：

onSlideClick: function() {
    accoPager.swipeTo(accoPager.clickedSlideIndex);
    accoSlider.swipeTo(accoPager.activeIndex);
}

当我点击一次时，此功能正常，但在第二次点击时它不再有效。

有趣的是，在我使用常规寻呼机（两侧的箭头按钮）或滑动后，事件再次起作用。似乎正在发生的事情是当我使用.swipeTo（）时，活动索引没有正确更新，但是当我使用.swipeNext（）或.swipePrevious（）时它会被更正。

Swipers的初始化（先大一点）：

slider= $('#acco-slider-top').swiper({
    mode: 'horizontal',
    paginationClickable: true,
    slidesPerView: 'auto',
    loop: true,
    loopedSlides: 99,
    onTouchEnd: function () {
        pagerCarousel.swipeTo(slider.activeIndex);
    }
});

pagerCarousel = $('#pager-area .swiper-container').swiper({
    mode: 'horizontal',
    paginationClickable: true,
    slidesPerView: 'auto',
    offsetPxBefore: 144,
    loop: true,
    loopedSlides: 99,
    onTouchEnd: function () {
        slider.swipeTo(pagerCarousel.activeIndex);
    },
    onSlideClick: function() {
        pagerCarousel.swipeTo(pagerCarousel.clickedSlideIndex);
        slider.swipeTo(pagerCarousel.clickedSlideIndex);
    }
});

我尝试设置活动索引，但这不起作用。当我在onSlideClick事件中发出任何警报时，我发现事件仍然链接到Swiper，但它在swiper代码中的某处停止了。

有没有人对此有任何疑问，最好的方法是什么？我认为它与params.onSlideClick _this.allowSlideClick在Swiper代码中切换有关，但我无法确切地指出究竟是什么。

编辑：不是不重要，我使用的是Swiper 2.4.2 +

Answer 1

这应该有用，很难说在没有查看实例的情况下问题出在哪里。请查看此示例以及如何在此处完成，可能会有所帮助http://goo.gl/Nc2M5P

onSlideClick后iDangerous Swiper失去同步

1 个答案: