Swiperjs 第一张附加幻灯片表现正常，但第二张以后没有

Question

下面是行为如下的 swiperjs 代码：

如果幻灯片数量<5，上一个和下一个按钮将不会显示，并且滑动条不可拖动。
如果幻灯片数量 > 5，滑动条变为可拖动，并显示上一个和下一个按钮。然后 swiper 将在 .5s 延迟后滚动到最后一张新添加的幻灯片（带动画）。

在 codepen 上查看 https://codepen.io/grey-ooi/pen/WNZKozR

第一张附加幻灯片表现得很好（幻灯片附加并滚动到它），但是第二张附加幻灯片向前 .5s 延迟滚动到最后一张幻灯片似乎不再起作用。它直接显示第二张没有滚动动画的附加幻灯片。

如果你能指出代码中的错误，我将不胜感激，谢谢！

var awayReplaySwiper = new Swiper('.awayReplaySwiper', {
            slidesPerView: 5,
            centeredSlides: false,
            spaceBetween: 4,
            observer: true,
            breakpoints: {
                // when window width is <= 499px
                499: {

                    spaceBetweenSlides: 8
                },
                

            },
            pagination: {
                //el: ".swiper-pagination",
                type: "fraction",
            },
            navigation: {
                nextEl: ".away-swiper-button-next",
                prevEl: ".away-swiper-button-prev",
            },
            on: {
                init: function () {
                    if (this.slides.length < 5) {
                        
                        this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                        $(".away-swiper-button-prev").hide();  // hiding arrows prev&next
                        $(".away-swiper-button-next").hide();

                        // Second way:
                        // this.el.classList.add('swiper-no-swiping');
                        console.log('away btn less than 5');
                    }

                    if (this.slides.length > 5) {
                        $('.awayReplaySwiper').find('.swiper-wrapper').removeClass('less_than_five');
                        this.allowSlidePrev = this.allowSlideNext = true; // disabling swiping
                        $(".away-swiper-button-prev").show();  // show arrows prev&next
                        $(".away-swiper-button-next").show();
                        console.log('away btn more than 5');
                        setTimeout(function () {
                            awayReplaySwiper.slideTo(awayReplaySwiper.slides.length);
                        }, 500);
                    }
                },
                observerUpdate: function () {
                    if (this.slides.length > 5) {
                        $('.awayReplaySwiper').find('.swiper-wrapper').removeClass('less_than_five');
                        this.allowSlidePrev = this.allowSlideNext = true; // disabling swiping
                        $(".away-swiper-button-prev").show();  // show arrows prev&next
                        $(".away-swiper-button-next").show();
                        console.log('away btn more than 5');
                        setTimeout(function () {
                            awayReplaySwiper.slideTo(awayReplaySwiper.slides.length);
                        }, 500);
                    }
                    console.log('slides added');
                }


            }
        });
var appendAwayNumber = awayReplaySwiper.slides.length;

上面是swiper添加幻灯片的js代码

document.querySelector(".append-away-btn").addEventListener("click", function (e) {
            e.preventDefault();

            awayReplaySwiper.appendSlide(
                    '<div class="swiper-slide"><a href="#" class="each_replay"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.70694 6.06984C9.24379 5.79188 8.82586 5.54105 8.47461 5.39538C8.10657 5.24274 7.60382 5.11618 7.10716 5.39739C6.6105 5.67859 6.46036 6.17481 6.40189 6.56894C6.34609 6.94507 6.34614 7.43251 6.3462 7.97266V16.0273C6.34614 16.5675 6.34609 17.0549 6.40189 17.4311C6.46036 17.8252 6.6105 18.3214 7.10716 18.6026C7.60382 18.8838 8.10657 18.7573 8.47461 18.6046C8.82586 18.459 9.2438 18.2081 9.70694 17.9302L16.4209 13.9018C16.86 13.6385 17.2595 13.3988 17.5423 13.1664C17.8421 12.92 18.1751 12.5504 18.1751 12C18.1751 11.4496 17.8421 11.08 17.5423 10.8336C17.2595 10.6012 16.86 10.3615 16.4209 10.0982L9.70694 6.06984Z" fill="#2B55E3"/><span>#' + ++appendAwayNumber + "</span></a></div>"
                    );

            setTimeout(function () {
                awayReplaySwiper.slideTo(awayReplaySwiper.slides.length);

            }, 500)
        });

Answer 1

添加了这个并解决了问题！

slidesLengthChange: function () {
                        
                        this.update();
                        setTimeout(function () {
                            homeReplaySwiper.slideTo(homeReplaySwiper.slides.length);
                            console.log('animated');
                        }, 500);
                    }

Swiperjs 第一张附加幻灯片表现正常，但第二张以后没有

Swiperjs 1st appended slides behave OK but 2nd onward doesn't

javascript

jquery

swiperjs

swiper.js