Why can't the callback function get the mySwiper? after adding the loop attribute to swiper.js?

The

code is as follows. If you directly use mySwiper in onSlideChangeEnd , an error message of mySwiper is undefined will occur.
but this will not happen if a timer is added. And do not add loop attribute will not appear, may I ask why?

mySwiper = new Swiper(".swiper-container", {
    direction: "vertical",
    resistanceRatio: 0,
    loop: true,
    onSlideChangeEnd: function () {
        setTimeout(() => {
            var i = mySwiper;
            console.log(i)
        }, 10);
        $(".swiper-slide").each(function () {
            if ($(this).hasClass("swiper-slide-active")) { // 
                $(this).children().show();
                $(this).siblings().children().hide();
            }
        });
        if (i == $(".swiper-slide").length - 1) { // 
            $(".arrow").hide();
        } else {
            $(".arrow").show();
        }
    }
});
Dec.18,2021

Both

initialSlide: non-0 and loop:true can cause this situation
talk about the execution flow
new Swiper () -> init -> slideTo (initialSlide)
initialization will make a default jump in slideTo will determine the position if it is the first return
and loop your first position is not actually set. A row jump triggers the Transition/SlideChange method

2 methods

  1. runCallbacksOnInit: false runCallbacksOnInit is specifically designed to deal with this situation if you don't want this initialization
  2. onSlideChangeEnd (s) has one parameter: swiper instance
Menu