Swiper JS return to first slide

Question

I have slider with swiper js, how it can return to first slide when we click Next Button on end of slide ?

http://idangero.us

Answer 1

You can set the loop parameter. For example:

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',
});

Answer 2

i made function like this:
.swiper-next is: navigation - nextEl

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

Answer 3

You may use "click" event from Swiper API.

Note: setTimeout is needed to correctly determine slide index

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))
    }
});