Skip to content

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

Open
@Tanya-atatakai

Description

Check that this is really a bug

  • 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

  • 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

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions