Skip to content

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

Open
@Undestor

Description

@Undestor

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

      Participants

      @Undestor

      Issue actions

        Jump (no smooth transition) when clicking on bullets and using "centeredSlides" and "loop" · Issue #7873 · nolimits4web/swiper