swiper
swiper copied to clipboard
Next slide navigation on Thumbs with loading="lazy" images scrolls to the first slide
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:
- Open the codesandbox link
- 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
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
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.