Next slide navigation on Thumbs with loading="lazy" images scrolls to the first slide

Tanya-atatakai commented 1 year ago

Check that this is really a bug

[X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-react-thumbs-lazy-loading-b65lcv?file=/src/App.jsx

Bug description

When use Swiper with Thumbs and Thumbs slides have image with loading="lazy", click on Thumbs next slide button scrolls back to the first slide if the next slide's image wasn't loaded yet.

Video of the issue: https://user-images.githubusercontent.com/22725775/217233116-c2ceb241-aaff-46f2-9b63-2c8de11fcf12.mov

Steps to reproduce: 1) Open the codesandbox link 2) Click next slide on Thumbs

Expected Behavior

Next slide with lazy image appears normally, the same as a slide with already loaded image

Actual Behavior

Next slide with not loaded yet image appears and then Thumbs swiper immediately scrolls to the first slide

Swiper version

9.0.3

Platform/Target and Browser Versions

macOS, Google Chrome Version 109.0.5414.119

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] 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

nolimits4web commented 1 year ago

Can't see such issue in this forked fiddle https://codesandbox.io/p/sandbox/swiper-react-thumbs-lazy-loading-forked-5r77b9?file=%2Fsrc%2FApp.jsx&selection=%5B%7B%22endColumn%22%3A28%2C%22endLineNumber%22%3A9%2C%22startColumn%22%3A28%2C%22startLineNumber%22%3A9%7D%5D

Video: https://user-images.githubusercontent.com/999588/217807050-d08af5cd-b7bb-420d-93b6-722444b33698.mov

christopherjanzen commented 1 year ago

Not only does this happen when the thumbs are lazy loaded, but it happens in the main swiper as well when images are lazy loaded. An example page for context: https://www.silverjeans.com/vintage-patch-pocket-wide-leg-high-rise-jeans/L28943RCS313.html Clicking on the last thumbnail without swiping through, the carousel will automatically jump back to the first image.

nolimits4web / swiper