swiper icon indicating copy to clipboard operation
swiper copied to clipboard

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

Open Tanya-atatakai opened this issue 1 year ago • 2 comments

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

Tanya-atatakai avatar Feb 07 '23 09:02 Tanya-atatakai

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

nolimits4web avatar Feb 09 '23 12:02 nolimits4web

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.

christopherjanzen avatar Mar 09 '23 19:03 christopherjanzen