Swiper: Lazy load + slidesPerView:"auto" not work together!

[mrWilson123]

This is a very old issue but has not yet been fixed.
Currently, it is not possible to use lazy load + slidesPerView:"auto" together. :(

--

• [x] bug
• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: v6.3.5

• Tested on Windows 10 - Chrome
• https://codepen.io/mrWilson123/pen/JjKQEKj

What you did

Tried to use lazy loading with slidesPerView: "auto".

var mySwiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  preloadImages: false,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  lazy: true,

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

Expected Behavior

• Images should only load when visible
• Navigation arrows should work

Actual Behavior

• All images load right away
• Navigation arrows stay deactivated
• As soon as you resize the page it seems to work again.

You can see this at https://codepen.io/mrWilson123/pen/JjKQEKj

You can also change slidesPerView: "auto" to slidesPerView: 2 and you will see images lazy load correctly, and the navigation works again.

[ygj6]

Same with issue 1679.

[mrWilson123]

Yes, but it doesn't help me further. As you can see, this problem has existed for years. There is still no solution.

[moevbiz]

add this to your options:

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

-> https://github.com/nolimits4web/swiper/issues/3929#issuecomment-723056648

[mrWilson123]

Thank you, @moevbiz. Your answer was very helpful. It seems to be working now. 👍