Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump (no smooth transition) when clicking on bullets and using "centeredSlides" and "loop" #7873

Open
5 of 6 tasks
Undestor opened this issue Jan 29, 2025 · 0 comments
Open
5 of 6 tasks

Comments

@Undestor
Copy link

Undestor commented Jan 29, 2025

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-infinite-loop-forked-3ckqtm

Bug description

When using a swiper config like

<script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        loop: true,
        centeredSlides: true,
        slidesPerView: 1,
        loopAddBlankSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        speed: 1000,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>

with the options "loop" and "centeredSlides" and i click the bullets in the following order: 3. bullet => last bullet, there is no smooth transition from my current slide (Slide 3) to the target slide (Slide 6). Instead there is a jump to the first slide (Slide 1) and a transition to the last slide (Slide 6):

swiper_jump.webm

In the swiper code the slideToLoop function is calling the function loopFix under specific conditions (which are fulfilled in the described behaviour) and this seems to be causing the issue:

if (needLoopFix) {
  const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
  swiper.loopFix({
    direction,
    slideTo: true,
    activeSlideIndex: direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - cols + 1,
    slideRealIndex: direction === 'next' ? swiper.realIndex : undefined
  });
}

I know that there exists already a similar issue: #7270. But the described behaviour there is partially about the pagination buttons which are not relevant for this issue.

Note: Using swiper v10 in the sandbox, the jumping does not happen

Expected Behavior

Smooth transition to from the current slide to the target slide (clicking the bullets in the described order)

Actual Behavior

No Smooth transition to from the current slide to the target slide. Instead there is a jump (clicking the bullets in the described order)

Swiper version

11.2.1

Platform/Target and Browser Versions

macOS, Chrome

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant