swiper.isEnd returns true, disabling the navigation buttons on first load even when slides are available to scroll

[talalmedudy]

Check that this is really a bug

• I confirm

Reproduction link

Unable to reproduce as the issue is from a private repository.

Bug description

When swiper is loaded, isEnd is returned to be as true, which disables swiper's next slide button, even though slides are available and can be scrolled using mouse drag. Using mouse drag then updates the swiper, which then in turn enables the forward navigation button. This only happens when on certain screen dimensions and swiper width, as this issue disappears when i change my browser screen width.

Expected Behavior

Swiper should wait until all the slides have been loaded to calculate the correct width for the slides to determine whether the last slide has been reached.

Actual Behavior

Swiper returns isEnd prematurely before the swiper has fully loaded, giving the wrong value and hence disabling the forward navigation button.

Swiper version

11.2.6

Platform/Target and Browser Versions

Firefox 137.0.2, Safari 18.3

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

[talalmedudy]

For anyone facing a similar issue, i've developed a small workaround, where I set a timeout inside a useEffect for my custom hook which is responsible for initializing and returning the swiper helper functions:

  const handleOnToFromEdge = useCallback(() => {
    setFirstSlide(swiper?.isBeginning)
    setLastSlide(swiper?.isEnd)
  }, [swiper])

  useEffect(() => {
    if (!swiper) return

    // timeout to refresh swiper after it loads to recalculate isEnd
    setTimeout(() => {
      handleOnToFromEdge()
    }, 100)

    handleOnToFromEdge()
  }, [swiper?.isBeginning, swiper?.isEnd, handleOnToFromEdge])