Swiper: Lazy Loading Swiper Jumps

[niklasp]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 6.3.5
• Platform/Target and Browser Versions: osx firefox 83.0
• Live Link or JSFiddle/Codepen or website with isssue: https://stackblitz.com/edit/lazy-loading-swiper-bug?file=index.js

What you did

Create a swiper with lazy loading. Offset of the images is wrong, unless I resize the window when everything is loaded. ( The same appears when adding a video to a slide).

Expected Behavior

Correct Image offset, also with { centeredSlides: true }

Actual Behavior

offset is wrong

[vltansky]

From example, it looks like this solves it for you, right?

          lazyImageReady: function() {
            console.log("lazy image ready");
            this.updateSlides();
            this.slideTo(this.activeIndex, 0, false);
          }

[niklasp]

unfortunately not. see a video here: https://nx5024.your-storageshare.de/s/YXW3p79HsHnJr4T. It only works correctly after resizing the browser window. Also does not work without data-srcset.

[vltansky]

@niklasp
https://skr.sh/v50bBm7aAsu?a
Am I testing it wrong?

[vltansky]

try:

        on: {
          lazyImageReady: (swiper) => {swiper.update()}
        }

https://stackblitz.com/edit/lazy-loading-swiper-bug-cpdyap?file=index.html

[niklasp]

@vltansky that last line of code fixed it for me. But i think the lazy loading feature needs more attention, as that somehow seems to me like a hack as it probably should be part of lazy loading, shouldn't it?

[vltansky]

Yeah, I think so too.
@nolimits4web take a look on this. Is just adding swiper.update() just before emitting lazyImageReady a good solution?

[nolimits4web]

Solution proposed by @vltansky is not a hack and should be used in this case (when images define slides sizes):

        on: {
          lazyImageReady: (swiper) => {swiper.update()}
        }