'swiper js - lazy loading inconsistent with freeMode

I am using Swiper 8.0.6 for a horizontal carousel implementation.

When the params ‘freeMode' and ‘lazy’ are both enabled the lazy loading becomes inconsistent. When you gently swipe, or you swipe and drag your swipe outside of the slider container, lazy loading is not triggered. When ‘lazy’ is enabled and ‘freeMode’ is disabled, the lazy loading works as expected.

Has anyone else experienced this?

Example of lazy loading issue with freemode - https://codepen.io/dcbaldwin1/pen/bGYzmRX

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
  <title>Document</title>
</head>
<body>
  <p style='text-align:center;'>Please see <a href='https://github.com/nolimits4web/swiper/discussions/5517' target='_blank'>https://github.com/nolimits4web/swiper/discussions/5517</a> for discussion on this. </p>
  <p style='text-align:center'>When the params ‘freeMode' and ‘lazy’ are both enabled the lazy loading becomes inconsistent. When you gently swipe, or you swipe and drag your swipe outside of the slider container, lazy loading is not triggered. When ‘lazy’ is enabled and ‘freeMode’ is disabled, the lazy loading works as expected.</p>
  <!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/148x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/149x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/145x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/146x235/"class="swiper-lazy main-img" />
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/147x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/143x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/142x235/"class="swiper-lazy main-img" />
    </div>
    <div class="swiper-slide">
      <img data-src="https://source.unsplash.com/random/151x235/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/148x236/" class="swiper-lazy main-img"/>
    </div>
    <div class="swiper-slide">
      <img src="https://c.tenor.com/qzuj7-PoJTcAAAAC/loading.gif" data-src="https://source.unsplash.com/random/150x235/" class="swiper-lazy main-img"/>
    </div>
  </div>
  <!-- If we need pagination 
  <div class="swiper-pagination"></div>
-->
  <!-- If we need navigation buttons 
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
-->
  
  <!-- If we need scrollbar 
  <div class="swiper-scrollbar"></div>
-->
</div>
</body>
</html>

CSS:

body {
  background: darkgray;
}
.swiper {
    width: 425px;
    border: 1px solid red;
}

.swiper-slide img {
  width: 147px;
  height: 235px;
}

JS:

const swiper = new Swiper(
  '.swiper',
  { 
    direction: "horizontal",
    "loop": false,

    "freeMode": true,
    "lazy": true,
    "spaceBetween": 10,
    "slidesPerView": 2.75
    // "navigation": {
    //   "nextEl": '.swiper-button-prev',
    //   "prevEl": '.swiper-button-next'
    // },
     
  });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'swiper js - lazy loading inconsistent with freeMode

Sources

Related Questions