2

我在一个页面上有两个 Swiper，它们是链接和同步的。两者都是循环播放并显示大约 60 张幻灯片（长度是动态的）。两个 Swiper 都有分页功能，点击“下一个”和“上一个”按钮（.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 代码中的某处停止。

有没有人对此也有任何问题，最好的方法是什么？我认为这与 Swiper 代码中的 params.onSlideClick _this.allowSlideClick 切换有关，但我无法确定具体是什么。

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

4

1 回答 1

0

这应该有效，如果不看现场示例，很难说问题出在哪里。检查这个例子以及它是如何在这里完成的，也许它会有所帮助http://goo.gl/Nc2M5P

于 2014-03-28T11:50:59.860 回答