slide using autoplay changes twice on mobiles

[sayakahiguchi]

Discussed in https://github.com/nolimits4web/swiper/discussions/5156

^{Originally posted by brassyk November 3, 2021}

Issue

I use autoplay and disableOnInteraction is false. When swiper init, slides chances once. After swipe many times quickly, slide start to change twice and a slide which is next one before swipe is active. is it a bubbling or autoplay doesn't get a slide which is active afte swipe?

Expected bihavior

slide changes once.

Actual bihavior

After swipe many times quickly, slide start to change twice and a slide which is next one before swipe is active.

Swiper version

7.2.0

Platform/Target and Browser Versions

iOS 14.7 Safari, Google Chrome

Sourse code

const swiper-slide =   document.querySelectorAll('.swiper-slide');
swiper_achievements = new Swiper('.class, {
                autoplay: {
                    delay:3000,
                    disableOnInteraction: false
                },
                slidesPerView: "auto",
                spaceBetween: 16,
                centeredSlides: true,
		centerInsufficientSlides: true,
                loop: true,
		loopAdditionalSlides: 1,
		loopedSlides: swiper-slide.length,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                pagination: {
                    el: ".swiper-pagination",
                    type: "progressbar"
                },
		preloadImages: false,
		touchEventsTarget: 'container',
		touchReleaseOnEdges: true,
		touchMoveStopPropagation: true,
            });
	        swiperBool = true;
        };

Validations

• [x] Follow our Code of Conduct

• [x] Read the docs.

• [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

https://user-images.githubusercontent.com/46993506/140860748-b08b9434-f383-40fb-bb9f-4528dc18f0b3.mp4

[github-actions[bot]]

Hello @brassyk. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[sayakahiguchi]

reproduction : https://codesandbox.io/s/naughty-maxwell-z7vqe

[sayakahiguchi]

I added options and remove loop, but can not solve it. is it related to using multiple swiper on WordPress?

on: {
        init: (swiper_achievements) => {
            const totalSlidesLen = swiper_achievements.slides.length;

            swiper_achievements.el.querySelector('.swiper-button-prev').addEventListener('click', () => {
            if (swiper_achievements.isBeginning) {
                swiper_achievements.slideTo(totalSlidesLen - 1);
            } else {
                swiper_achievements.slideTo(swiper_achievements.realIndex - 1);
            }
            });

            swiper_achievements.el.querySelector('.swiper-button-next').addEventListener('click', () => {
            if (swiper_achievements.isEnd) {
                swiper_achievements.slideTo(0);
            } else {
                swiper_achievements.slideTo(swiper_achievements.realIndex + 1);
            }
            });
        },
        afterInit: (swiper_achievements) => {
            swiper_achievements.autoplay.stop();
            const options = {
                root:       null,
                rootMargin: '-50%',
                thredhold:  0
            };
            const target = achievementsContainer;
            const observer = new IntersectionObserver(callback, options);
            observer.observe(target);
            function callback(entries, object) {
                entries.forEach(function(entry, i) {
                    if (!entry.isIntersecting) return;
                    const target = entry.target;
                    swiper_achievements.autoplay.start();
                    object.unobserve(target);
                });
            };
        },
        touchStart(swiper_achievements, e) {
swiper_achievements.autoplay.stop();

            if (e.type === 'touchstart') {
              swiperTouchStartX = e.touches[0].clientX;
            } else {
              swiperTouchStartX = e.clientX;
            }
          },

        touchEnd(swiper_achievements, e) {

            const tolerance = 150;

            const totalSlidesLen = swiper_achievements.slides.length;

            const diff = (() => {
              if (e.type === 'touchend') {
                return e.changedTouches[0].clientX - swiperTouchStartX;
              } else {
                return e.clientX - swiperTouchStartX;
              }
            })();

            // 最初のスライド上で左にスワイプされたときは最後のスライドに飛ばす
            if (swiper_achievements.isBeginning && diff >= tolerance) {
              swiper_achievements.slideTo(totalSlidesLen - 1);
            } else if (swiper_achievements.isEnd && diff <= -tolerance) {
              setTimeout(() => {
                swiper_achievements.slideTo(0);
              }, 1);
            }
swiper_achievements.updateProgress();
swiper_achievements.autoplay.start();
        },

},

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nolimits4web]

Swiper v9 comes with fully reworked autoplay module. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.