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

Active Slide Index Stuck on Last Slide After Looping #7809

Open
5 of 6 tasks
CaioMS2000 opened this issue Nov 30, 2024 · 5 comments
Open
5 of 6 tasks

Active Slide Index Stuck on Last Slide After Looping #7809

CaioMS2000 opened this issue Nov 30, 2024 · 5 comments
Labels

Comments

@CaioMS2000
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-7q3863

Bug description

I'm using the slider in a simple way with the default settings I configured. I'm monitoring the active slide with onSlideChange, and at first, it works well. The autoplay transitions through the images as expected, but the issue starts when it reaches the last slide. Since I'm logging the active slide, I can see that after it reaches the last one, even though it loops back to the first slide (due to the active loop), it keeps logging the index of the last slide every time.

Expected Behavior

Since I tested with 3 images, it should log sequentially as 0, 1, 2, 0, 1, 2, and so on.

Actual Behavior

It's logging 0, 1, 2, 2, 2, 2. The slider is correctly looping through the images, but the indices remain "stuck" on the last one.

Swiper version

11.1.15

Platform/Target and Browser Versions

Windows 11 - WSL

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
@apnnux
Copy link

apnnux commented Dec 11, 2024

Same, also this bug is present for back to, if you looping from 0 to last index remining 0

@Nut41tank
Copy link

Have same problem. on version 11.1.15

@Wimmind
Copy link

Wimmind commented Jan 25, 2025

Has anyone solved this problem?

@apnnux
Copy link

apnnux commented Jan 26, 2025

You can use realIndex instead of activeIndex when loop option is active, it's a correct looped index

@Wimmind
Copy link

Wimmind commented Jan 27, 2025

I had to calculate the current real index myself

const getRealSlideIndex: GetRealSlideIndex = (stateParams, index) => {
  const [state] = stateParams
  const { swiper } = state
  const slides = swiper?.wrapperEl.querySelectorAll('.swiper-slide') || []

  const realIndex = Array.from(slides).findIndex((item) => item.getAttribute(`data-swiper-slide-index`) === `${index}`)

  return realIndex === -1 ? index : realIndex
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants