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

Initial URL with hash breaks navigation #7678

Closed
5 of 6 tasks
liliwei25 opened this issue Aug 14, 2024 · 0 comments
Closed
5 of 6 tasks

Initial URL with hash breaks navigation #7678

liliwei25 opened this issue Aug 14, 2024 · 0 comments
Labels

Comments

@liliwei25
Copy link

liliwei25 commented Aug 14, 2024

Check that this is really a bug

  • I confirm

Reproduction link

Bug description

firstly, thanks for the great work! and apologies for not being able to provide a replication.

bug: when there is a hash in the initial URL, subsequent swiper.slideTo breaks.

const swiper = useSwiper()

const goToSlide = (hash: string) => {
  const index = swiper.slides.findIndex((slide) => 
    slide.attributes.getNamedItem('data-hash')?.value === hash
  )
  swiper.slideTo(index)
}

also tried

window.location.hash = hash

but both will redirect to the wrong slide

this is the config for swiper

<Swiper
      onSwiper={(instance) => (swiper.current = instance)}
      allowTouchMove={false}
      pagination={{ type: 'progressbar', progressbarOpposite: true }}
      keyboard
      mousewheel={{ forceToAxis: true, thresholdTime: 800, thresholdDelta: 20 }}
      direction='vertical'
      a11y={{ enabled: true }}
      hashNavigation={{
        watchState: true,
        replaceState: true,
      }}
      modules={[Keyboard, Mousewheel, Pagination, HashNavigation]}
>
  {shouldShowSlide1 && <Slide1 />}
  {shouldShowSlide2 && <Slide2 />}
  {shouldShowSlide3 && <Slide3 />}
  {shouldShowSlide4 && <Slide4 />}
</Swiper>

example: visiting www.example.com/#slide3 loads slide 3, but when we programmatically move to slide 1 using goToSlide, it will show slide 2 instead

have been stuck on this issue for some time. any help would be greatly appreciated! thank you! 🙏

edit: adding more info
running Swiper React on NextJS 14

Expected Behavior

Scrolling should work as expected

Actual Behavior

Does not scroll to the slide with the correct index or hash

Swiper version

10.3.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
Projects
None yet
Development

No branches or pull requests

1 participant