Swiper JS 返回第一张幻灯片答案

【问题标题】：Swiper JS return to first slideSwiper JS 返回第一张幻灯片
【发布时间】：2016-10-16 15:32:04
【问题描述】：

我有一个带有 swiper js 的滑块，当我们单击幻灯片末尾的下一步按钮时，它如何返回到第一张幻灯片？

【问题讨论】：

你找到解决办法了吗？

【解决方案1】：

您可以设置loop 参数。例如：

var mySwiper = new Swiper ('.swiper-header', {
  loop: true, //this should allow the last next button to return to the beginning
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

【讨论】：

【解决方案2】：

我做了这样的功能：
.swiper-next 是：导航-nextEl

var changed = false;
$(".swiper-next").on('click', function () {
    if (changed === true) {
        changed = false;
        faqSwiper.slideTo(0);
    }
    if (faqSwiper.isEnd) changed = true;
})

【讨论】：

【解决方案3】：

您可以使用 Swiper API 中的“点击”事件。

注意：正确确定幻灯片索引需要setTimeout

const swiper_instance = new Swiper('.swiper-container', {
  // ...
});

swiper_instance.on('click', function (swiper, event) {
    const is_next_click = event.target === swiper.navigation.nextEl,
        is_prev_click = event.target === swiper.navigation.prevEl,
        is_end = this.isEnd,
        is_beginning = this.isBeginning;

    // slide to begin
    if (is_next_click && is_end) {
        setTimeout(() => swiper.slideTo(0))
    }

    // slide to end
    if (is_prev_click && is_beginning) {
        setTimeout(() => swiper.slideTo(swiper.slides.length))
    }
});

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。